admin-ui-starter-kit 0.1.4 → 0.4.2

package/dist/showcase/assets/activities-DMDQje7Y.js

@@ -0,0 +1,501 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{n as r,r as i,t as a}from"./activities-feed-card-B8wpu4F3.js";import{Er as o,hr as s,mr as c,r as l,t as u}from"./example-BIrQab7K.js";import{t as d}from"./bell-Dt3Nz2y2.js";import{t as f}from"./box-mt6TbZO6.js";import{t as p}from"./credit-card-CYgRtM77.js";import{t as m}from"./eye-CnRPL_H8.js";import{t as h}from"./receipt-T8B9lscp.js";import{t as g}from"./shield-check-CRbBJXw2.js";import{t as _}from"./trash-2-OsaEm8cc.js";import{t as v}from"./truck-CvvBxBeB.js";import{t as y}from"./user-Bqmz8M16.js";import{a as b,s as x}from"./index-Cz4UGUT2.js";import{t as S}from"./props-table-BR-KjRNe.js";var C=b(`reply`,[[`path`,{d:`M20 18v-2a4 4 0 0 0-4-4H4`,key:`5vmcpk`}],[`path`,{d:`m9 17-5-5 5-5`,key:`nvlc11`}]]),w=e({CompactFeed:()=>I,CustomRows:()=>z,DefaultFeed:()=>F,EventConfiguration:()=>R,ResourceRegistry:()=>B,RichFeed:()=>L}),T=t(n(),1),E=x(),D=Date.now(),O=e=>new Date(D-e).toISOString(),k=60*1e3,A=60*k,j=24*A,M={"order:INV-2026-0392":{label:`INV-2026-0392`,href:`#/orders/INV-2026-0392`,icon:h,tone:`primary`,badge:{label:`Paid`,tone:`success`},tags:[`EUR 320`]},"order:INV-2026-0398":{label:`INV-2026-0398`,href:`#/orders/INV-2026-0398`,icon:h,tone:`warning`,badge:{label:`Refund`,tone:`warning`}},"product:AIR-BALLOON-01":{label:`Hot Air Balloon`,href:`#/products/AIR-BALLOON-01`,icon:f,tone:`info`},"shipment:SHP-2026-77":{label:`SHP-2026-77`,href:`#/shipments/SHP-2026-77`,icon:v,tone:`info`,badge:{label:`In transit`,tone:`info`}}},N=[{id:`a1`,event:`paid`,actor:{id:`u-12`,name:`Sarah Smitha`},createdAt:O(2*k),segments:[{type:`actor`,text:`Sarah Smitha`,actorId:`u-12`},{type:`text`,text:`paid`},{type:`resource`,resource:{key:`order:INV-2026-0392`,type:`order`}},{type:`text`,text:`— full balance.`}]},{id:`a2`,event:`status_changed`,actor:{id:`u-7`,name:`Daniel Smith`},createdAt:O(35*k),segments:[{type:`actor`,text:`Daniel Smith`,actorId:`u-7`},{type:`text`,text:`changed status to`},{type:`status`,text:`Confirmed`,tone:`success`},{type:`text`,text:`on`},{type:`resource`,resource:{key:`shipment:SHP-2026-77`,type:`shipment`}}]},{id:`a3`,event:`mail_delivered`,source:`mail`,actor:{id:`system`,name:`Mailer`},createdAt:O(3*A),segments:[{type:`text`,text:`Receipt email`},{type:`value`,text:`"Your booking confirmation"`},{type:`text`,text:`was delivered to`},{type:`value`,text:`maria@example.com`}]},{id:`a4`,event:`comment_created`,source:`comment`,actor:{id:`u-21`,name:`Emma Garcia`},createdAt:O(1008e5),description:`Customer asked whether the basket fits 4 adults — looped support in.`,segments:[{type:`actor`,text:`Emma Garcia`,actorId:`u-21`},{type:`text`,text:`commented on`},{type:`resource`,resource:{key:`product:AIR-BALLOON-01`,type:`product`}}]},{id:`a5`,event:`mail_failed`,source:`mail`,actor:{id:`system`,name:`Mailer`},createdAt:O(1944e5),headline:`Webhook failure on shopify.payments.captured.`}],P=[{id:`r1`,event:`updated`,actor:{id:`u-12`,name:`Sarah Smitha`},createdAt:O(8*k),segments:[{type:`actor`,text:`Sarah Smitha`,actorId:`u-12`},{type:`text`,text:`updated`},{type:`field`,text:`shipping`},{type:`text`,text:`on`},{type:`resource`,resource:{key:`order:INV-2026-0392`}}],changes:[{key:`address`,label:`Address`,old:`New York 1000`,new:`New York 1407`},{key:`method`,label:`Method`,old:`Standard`,new:`Express`},{key:`note`,label:`Note`,new:`Leave with concierge.`}],metadata:[{label:`IP`,value:`85.130.12.4`},{label:`Device`,value:`macOS · Safari`}],resources:[{key:`order:INV-2026-0392`},{key:`shipment:SHP-2026-77`}]},{id:`r2`,event:`refunded`,actor:{id:`u-7`,name:`Daniel Smith`},createdAt:O(45*k),segments:[{type:`actor`,text:`Daniel Smith`,actorId:`u-7`},{type:`text`,text:`refunded`},{type:`resource`,resource:{key:`order:INV-2026-0398`}},{type:`text`,text:`partially.`}],description:`Refund processed via the original Visa ending 4242.`,metadata:[{label:`Amount`,value:`€ 80.00`},{label:`Reason`,value:`Damaged in transit`}]},{id:`r3`,event:`comment_created`,source:`comment`,actor:{id:`u-21`,name:`Emma Garcia`},createdAt:O(2*A),description:`Need a final spec for the basket — colour swatches in next sprint.`,segments:[{type:`actor`,text:`Emma Garcia`,actorId:`u-21`},{type:`text`,text:`left a note on`},{type:`resource`,resource:{key:`product:AIR-BALLOON-01`}}]}];function F(){let[e,t]=(0,T.useState)(M),[n,r]=(0,T.useState)(`No interactions yet — click an actor or resource.`),i=e=>r(e);return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(a,{activities:N,currentUserId:`u-12`,resources:e,onResourcesChange:t,onActorClick:e=>i(`Actor click → ${e.name} (${e.id??`—`})`),onResourceClick:(e,t)=>i(`Resource click → ${e.key} ${t?`(${t.label})`:`(unregistered)`}`),onActivityClick:e=>i(`Activity click → ${e.event} · ${e.id}`),titleSuffix:(0,E.jsx)(o,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:N.length}),description:`The actor matching currentUserId is rendered as 'You'. Resources are fed live from the registry below.`}),(0,E.jsx)(o,{size:`xs`,type:`secondary`,className:`mt-3`,children:n})]})}function I(){let[e]=(0,T.useState)(M);return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(a,{activities:N,density:`compact`,resources:e,title:`Compact`,description:`Dot-only marker, single line per row. Fit for sidebars / activity pills.`})})}function L(){let[e,t]=(0,T.useState)(M),[,n]=(0,T.useState)(`—`),r=e=>n(e);return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(a,{activities:P,density:`rich`,currentUserId:`u-12`,resources:e,onResourcesChange:t,title:`Rich`,actionsForActivity:e=>[{id:`view`,label:`View details`,icon:m,onClick:()=>r(`Action → view (${e.id})`)},{id:`reply`,label:`Reply`,icon:C,onClick:()=>r(`Action → reply (${e.id})`)},{id:`delete`,label:`Delete`,icon:_,tone:`destructive`,onClick:()=>r(`Action → delete (${e.id})`)}],onAction:(e,t)=>r(`onAction → ${e} · ${t.id}`)})})}function R(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(a,{activities:[{id:`evt-1`,event:`subscription_renewed`,createdAt:O(20*k),actor:{id:`sys`,name:`Billing`},segments:[{type:`text`,text:`Subscription`},{type:`value`,text:`Pro Annual`},{type:`text`,text:`auto-renewed for`},{type:`value`,text:`Sarah Smitha`}],metadata:[{label:`Next charge`,value:`Apr 30 2027`}]},{id:`evt-2`,event:`payment_method_added`,createdAt:O(2*j),actor:{id:`u-12`,name:`Sarah Smitha`},segments:[{type:`actor`,text:`Sarah Smitha`,actorId:`u-12`},{type:`text`,text:`added a new card ending`},{type:`value`,text:`4242`}]},{id:`evt-3`,event:`access_granted`,createdAt:O(3*j),actor:{id:`u-21`,name:`Emma Garcia`},segments:[{type:`actor`,text:`Emma Garcia`,actorId:`u-21`},{type:`text`,text:`granted access to`},{type:`value`,text:`Daniel Smith`},{type:`status`,text:`Editor`,tone:`info`}]}],eventConfig:{subscription_renewed:{icon:d,tone:`success`,label:`Renewed`},payment_method_added:{icon:p,tone:`info`,label:`Card added`},access_granted:{icon:g,tone:`primary`,label:`Access`}},strings:{title:`Account events`,sources:{system:`Auto`}},title:`Account events`})})}function z(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(a,{activities:N.slice(0,3),title:`Custom rows`,slots:{renderRow:(e,t)=>(0,E.jsxs)(`div`,{className:`flex items-start gap-3 rounded-md border border-border/60 bg-card px-3 py-2 mb-2`,children:[(0,E.jsx)(`span`,{className:`mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground`,children:(0,E.jsx)(y,{className:`size-3.5`})}),(0,E.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,E.jsx)(o,{weight:`medium`,children:e.actor?.name??`—`}),(0,E.jsxs)(o,{size:`xs`,type:`secondary`,children:[t.eventConfig.label??e.event,t.relativeTime?` · ${t.relativeTime}`:``]})]}),(0,E.jsx)(i,{className:`size-4 text-muted-foreground`})]})}})})}function B(){let[e,t]=(0,T.useState)(M),[,n]=(0,T.useState)(`—`),i=e=>n(e);return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(o,{type:`secondary`,className:`mb-3`,children:`Edit a resource entry — every row referencing that key updates immediately and the registry change is broadcast through onResourcesChange (wire to localStorage / API).`}),(0,E.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-[2fr_1fr]`,children:[(0,E.jsx)(r,{activities:P,density:`rich`,currentUserId:`u-12`,resources:e,onResourcesChange:t,onResourceClick:(e,t)=>i(`Registry click → ${e.key} (${t?.label??`untagged`})`)}),(0,E.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-4`,children:[(0,E.jsx)(o,{weight:`semibold`,className:`mb-3`,children:`Registered resources`}),(0,E.jsxs)(`div`,{className:`space-y-3`,children:[Object.entries(e).map(([e,n])=>(0,E.jsxs)(`div`,{className:`space-y-1 rounded-md border border-border/60 px-3 py-2`,children:[(0,E.jsx)(o,{size:`xs`,type:`secondary`,className:`tabular-nums`,children:e}),(0,E.jsx)(o,{weight:`medium`,children:n.label}),(0,E.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,E.jsx)(l,{size:`xs`,variant:`secondary`,buttonStyle:`outline`,onClick:()=>t(t=>({...t,[e]:{...t[e],badge:{label:`Updated`,tone:`warning`}}})),children:`Mark updated`}),(0,E.jsx)(l,{size:`xs`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>t(t=>{let n={...t};return delete n[e],n}),children:`Untag`})]})]},e)),Object.keys(e).length===0&&(0,E.jsx)(o,{size:`xs`,type:`secondary`,children:`Registry empty — every reference now renders as a plain key.`}),(0,E.jsx)(l,{size:`xs`,variant:`primary`,buttonStyle:`solid`,onClick:()=>t(M),children:`Restore seed`})]})]})]})]})}var V=`import {
+    Bell,
+    Bookmark,
+    Box,
+    CreditCard,
+    Eye,
+    Reply,
+    Receipt,
+    ShieldCheck,
+    Trash2,
+    Truck,
+    User,
+} from 'lucide-react';
+import { useState } from 'react';
+import {
+    ActivityFeed,
+    ActivityFeedCard,
+    type ActivityItem,
+    type ActivityResourceConfig,
+} from '@/components/features/activities';
+import { Button } from '@/components/base/buttons';
+import { Text } from '@/components/typography';
+
+/**
+ * Activities feature preview — demonstrates the redesigned <ActivityFeed />.
+ *
+ * Sections:
+ *   1. Default density — the workhorse
+ *   2. Compact density — dense one-line feed
+ *   3. Rich density — icons, headline segments, change diff, actions, resources
+ *   4. Mass-config + custom rendering
+ *   5. Resource registry — save/restore tagging/badging/linking
+ */
+
+
+
+
+
+
+const NOW = Date.now();
+const REL = (offsetMs: number) => new Date(NOW - offsetMs).toISOString();
+const MIN = 60 * 1000;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+
+const RESOURCE_SEED: Record<string, ActivityResourceConfig> = {
+    'order:INV-2026-0392': {
+        label: 'INV-2026-0392',
+        href: '#/orders/INV-2026-0392',
+        icon: Receipt,
+        tone: 'primary',
+        badge: { label: 'Paid', tone: 'success' },
+        tags: ['EUR 320'],
+    },
+    'order:INV-2026-0398': {
+        label: 'INV-2026-0398',
+        href: '#/orders/INV-2026-0398',
+        icon: Receipt,
+        tone: 'warning',
+        badge: { label: 'Refund', tone: 'warning' },
+    },
+    'product:AIR-BALLOON-01': {
+        label: 'Hot Air Balloon',
+        href: '#/products/AIR-BALLOON-01',
+        icon: Box,
+        tone: 'info',
+    },
+    'shipment:SHP-2026-77': {
+        label: 'SHP-2026-77',
+        href: '#/shipments/SHP-2026-77',
+        icon: Truck,
+        tone: 'info',
+        badge: { label: 'In transit', tone: 'info' },
+    },
+};
+
+const DEFAULT_ACTIVITIES: ActivityItem[] = [
+    {
+        id: 'a1',
+        event: 'paid',
+        actor: { id: 'u-12', name: 'Sarah Smitha' },
+        createdAt: REL(2 * MIN),
+        segments: [
+            { type: 'actor', text: 'Sarah Smitha', actorId: 'u-12' },
+            { type: 'text', text: 'paid' },
+            { type: 'resource', resource: { key: 'order:INV-2026-0392', type: 'order' } },
+            { type: 'text', text: '— full balance.' },
+        ],
+    },
+    {
+        id: 'a2',
+        event: 'status_changed',
+        actor: { id: 'u-7', name: 'Daniel Smith' },
+        createdAt: REL(35 * MIN),
+        segments: [
+            { type: 'actor', text: 'Daniel Smith', actorId: 'u-7' },
+            { type: 'text', text: 'changed status to' },
+            { type: 'status', text: 'Confirmed', tone: 'success' },
+            { type: 'text', text: 'on' },
+            { type: 'resource', resource: { key: 'shipment:SHP-2026-77', type: 'shipment' } },
+        ],
+    },
+    {
+        id: 'a3',
+        event: 'mail_delivered',
+        source: 'mail',
+        actor: { id: 'system', name: 'Mailer' },
+        createdAt: REL(3 * HOUR),
+        segments: [
+            { type: 'text', text: 'Receipt email' },
+            { type: 'value', text: '"Your booking confirmation"' },
+            { type: 'text', text: 'was delivered to' },
+            { type: 'value', text: 'maria@example.com' },
+        ],
+    },
+    {
+        id: 'a4',
+        event: 'comment_created',
+        source: 'comment',
+        actor: { id: 'u-21', name: 'Emma Garcia' },
+        createdAt: REL(1 * DAY + 4 * HOUR),
+        description:
+            'Customer asked whether the basket fits 4 adults — looped support in.',
+        segments: [
+            { type: 'actor', text: 'Emma Garcia', actorId: 'u-21' },
+            { type: 'text', text: 'commented on' },
+            { type: 'resource', resource: { key: 'product:AIR-BALLOON-01', type: 'product' } },
+        ],
+    },
+    {
+        id: 'a5',
+        event: 'mail_failed',
+        source: 'mail',
+        actor: { id: 'system', name: 'Mailer' },
+        createdAt: REL(2 * DAY + 6 * HOUR),
+        headline: 'Webhook failure on shopify.payments.captured.',
+    },
+];
+
+const RICH_ACTIVITIES: ActivityItem[] = [
+    {
+        id: 'r1',
+        event: 'updated',
+        actor: { id: 'u-12', name: 'Sarah Smitha' },
+        createdAt: REL(8 * MIN),
+        segments: [
+            { type: 'actor', text: 'Sarah Smitha', actorId: 'u-12' },
+            { type: 'text', text: 'updated' },
+            { type: 'field', text: 'shipping' },
+            { type: 'text', text: 'on' },
+            { type: 'resource', resource: { key: 'order:INV-2026-0392' } },
+        ],
+        changes: [
+            { key: 'address', label: 'Address', old: 'New York 1000', new: 'New York 1407' },
+            { key: 'method', label: 'Method', old: 'Standard', new: 'Express' },
+            { key: 'note', label: 'Note', new: 'Leave with concierge.' },
+        ],
+        metadata: [
+            { label: 'IP', value: '85.130.12.4' },
+            { label: 'Device', value: 'macOS · Safari' },
+        ],
+        resources: [
+            { key: 'order:INV-2026-0392' },
+            { key: 'shipment:SHP-2026-77' },
+        ],
+    },
+    {
+        id: 'r2',
+        event: 'refunded',
+        actor: { id: 'u-7', name: 'Daniel Smith' },
+        createdAt: REL(45 * MIN),
+        segments: [
+            { type: 'actor', text: 'Daniel Smith', actorId: 'u-7' },
+            { type: 'text', text: 'refunded' },
+            { type: 'resource', resource: { key: 'order:INV-2026-0398' } },
+            { type: 'text', text: 'partially.' },
+        ],
+        description: 'Refund processed via the original Visa ending 4242.',
+        metadata: [
+            { label: 'Amount', value: '€ 80.00' },
+            { label: 'Reason', value: 'Damaged in transit' },
+        ],
+    },
+    {
+        id: 'r3',
+        event: 'comment_created',
+        source: 'comment',
+        actor: { id: 'u-21', name: 'Emma Garcia' },
+        createdAt: REL(2 * HOUR),
+        description:
+            'Need a final spec for the basket — colour swatches in next sprint.',
+        segments: [
+            { type: 'actor', text: 'Emma Garcia', actorId: 'u-21' },
+            { type: 'text', text: 'left a note on' },
+            { type: 'resource', resource: { key: 'product:AIR-BALLOON-01' } },
+        ],
+    },
+];
+
+export function DefaultFeed() {
+	const [registry, setRegistry] =
+	        useState<Record<string, ActivityResourceConfig>>(RESOURCE_SEED);
+	const [lastEvent, setLastEvent] = useState<string>(
+	        'No interactions yet — click an actor or resource.',
+	    );
+	const recordEvent = (msg: string) => setLastEvent(msg);
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={DEFAULT_ACTIVITIES}
+			                    currentUserId="u-12"
+			                    resources={registry}
+			                    onResourcesChange={setRegistry}
+			                    onActorClick={(actor) =>
+			                        recordEvent(\`Actor click → \${actor.name} (\${actor.id ?? '—'})\`)
+			                    }
+			                    onResourceClick={(ref, cfg) =>
+			                        recordEvent(
+			                            \`Resource click → \${ref.key} \${cfg ? \`(\${cfg.label})\` : '(unregistered)'}\`,
+			                        )
+			                    }
+			                    onActivityClick={(a) =>
+			                        recordEvent(\`Activity click → \${a.event} · \${a.id}\`)
+			                    }
+			                    titleSuffix={
+			                        <Text size="xxs" type="secondary" className="tabular-nums">
+			                            {DEFAULT_ACTIVITIES.length}
+			                        </Text>
+			                    }
+			                    description="The actor matching currentUserId is rendered as 'You'. Resources are fed live from the registry below."
+			                />
+			                <Text size="xs" type="secondary" className="mt-3">
+			                    {lastEvent}
+			                </Text>
+		</>
+	);
+}
+
+export function CompactFeed() {
+	const [registry] =
+	        useState<Record<string, ActivityResourceConfig>>(RESOURCE_SEED);
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={DEFAULT_ACTIVITIES}
+			                    density="compact"
+			                    resources={registry}
+			                    title="Compact"
+			                    description="Dot-only marker, single line per row. Fit for sidebars / activity pills."
+			                />
+		</>
+	);
+}
+
+export function RichFeed() {
+	const [registry, setRegistry] =
+	        useState<Record<string, ActivityResourceConfig>>(RESOURCE_SEED);
+	const [, setLastEvent] = useState<string>('—');
+	const recordEvent = (msg: string) => setLastEvent(msg);
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={RICH_ACTIVITIES}
+			                    density="rich"
+			                    currentUserId="u-12"
+			                    resources={registry}
+			                    onResourcesChange={setRegistry}
+			                    title="Rich"
+			                    actionsForActivity={(a) => [
+			                        {
+			                            id: 'view',
+			                            label: 'View details',
+			                            icon: Eye,
+			                            onClick: () =>
+			                                recordEvent(\`Action → view (\${a.id})\`),
+			                        },
+			                        {
+			                            id: 'reply',
+			                            label: 'Reply',
+			                            icon: Reply,
+			                            onClick: () =>
+			                                recordEvent(\`Action → reply (\${a.id})\`),
+			                        },
+			                        {
+			                            id: 'delete',
+			                            label: 'Delete',
+			                            icon: Trash2,
+			                            tone: 'destructive',
+			                            onClick: () =>
+			                                recordEvent(\`Action → delete (\${a.id})\`),
+			                        },
+			                    ]}
+			                    onAction={(actionId, a) =>
+			                        recordEvent(\`onAction → \${actionId} · \${a.id}\`)
+			                    }
+			                />
+		</>
+	);
+}
+
+export function EventConfiguration() {
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={[
+			                        {
+			                            id: 'evt-1',
+			                            event: 'subscription_renewed',
+			                            createdAt: REL(20 * MIN),
+			                            actor: { id: 'sys', name: 'Billing' },
+			                            segments: [
+			                                { type: 'text', text: 'Subscription' },
+			                                { type: 'value', text: 'Pro Annual' },
+			                                { type: 'text', text: 'auto-renewed for' },
+			                                { type: 'value', text: 'Sarah Smitha' },
+			                            ],
+			                            metadata: [{ label: 'Next charge', value: 'Apr 30 2027' }],
+			                        },
+			                        {
+			                            id: 'evt-2',
+			                            event: 'payment_method_added',
+			                            createdAt: REL(2 * DAY),
+			                            actor: { id: 'u-12', name: 'Sarah Smitha' },
+			                            segments: [
+			                                { type: 'actor', text: 'Sarah Smitha', actorId: 'u-12' },
+			                                { type: 'text', text: 'added a new card ending' },
+			                                { type: 'value', text: '4242' },
+			                            ],
+			                        },
+			                        {
+			                            id: 'evt-3',
+			                            event: 'access_granted',
+			                            createdAt: REL(3 * DAY),
+			                            actor: { id: 'u-21', name: 'Emma Garcia' },
+			                            segments: [
+			                                { type: 'actor', text: 'Emma Garcia', actorId: 'u-21' },
+			                                { type: 'text', text: 'granted access to' },
+			                                { type: 'value', text: 'Daniel Smith' },
+			                                { type: 'status', text: 'Editor', tone: 'info' },
+			                            ],
+			                        },
+			                    ]}
+			                    eventConfig={{
+			                        subscription_renewed: {
+			                            icon: Bell,
+			                            tone: 'success',
+			                            label: 'Renewed',
+			                        },
+			                        payment_method_added: {
+			                            icon: CreditCard,
+			                            tone: 'info',
+			                            label: 'Card added',
+			                        },
+			                        access_granted: {
+			                            icon: ShieldCheck,
+			                            tone: 'primary',
+			                            label: 'Access',
+			                        },
+			                    }}
+			                    strings={{
+			                        title: 'Account events',
+			                        sources: { system: 'Auto' },
+			                    }}
+			                    title="Account events"
+			                />
+		</>
+	);
+}
+
+export function CustomRows() {
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={DEFAULT_ACTIVITIES.slice(0, 3)}
+			                    title="Custom rows"
+			                    slots={{
+			                        renderRow: (a, ctx) => (
+			                            <div
+			                                className="flex items-start gap-3 rounded-md border border-border/60 bg-card px-3 py-2 mb-2"
+			                            >
+			                                <span
+			                                    className="mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground"
+			                                >
+			                                    <User className="size-3.5" />
+			                                </span>
+			                                <div className="min-w-0 flex-1">
+			                                    <Text weight="medium">
+			                                        {a.actor?.name ?? '—'}
+			                                    </Text>
+			                                    <Text size="xs" type="secondary">
+			                                        {ctx.eventConfig.label ?? a.event}
+			                                        {ctx.relativeTime
+			                                            ? \` · \${ctx.relativeTime}\`
+			                                            : ''}
+			                                    </Text>
+			                                </div>
+			                                <Bookmark className="size-4 text-muted-foreground" />
+			                            </div>
+			                        ),
+			                    }}
+			                />
+		</>
+	);
+}
+
+export function ResourceRegistry() {
+	const [registry, setRegistry] =
+	        useState<Record<string, ActivityResourceConfig>>(RESOURCE_SEED);
+	const [, setLastEvent] = useState<string>('—');
+	const recordEvent = (msg: string) => setLastEvent(msg);
+	return (
+		<>
+			<Text type="secondary" className="mb-3">
+			                    Edit a resource entry — every row referencing that key updates immediately and the registry change is broadcast through onResourcesChange (wire to localStorage / API).
+			                </Text>
+			                <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
+			                    <ActivityFeed
+			                        activities={RICH_ACTIVITIES}
+			                        density="rich"
+			                        currentUserId="u-12"
+			                        resources={registry}
+			                        onResourcesChange={setRegistry}
+			                        onResourceClick={(ref, cfg) =>
+			                            recordEvent(
+			                                \`Registry click → \${ref.key} (\${cfg?.label ?? 'untagged'})\`,
+			                            )
+			                        }
+			                    />
+			                    <div className="rounded-lg border border-border bg-card p-4">
+			                        <Text weight="semibold" className="mb-3">
+			                            Registered resources
+			                        </Text>
+			                        <div className="space-y-3">
+			                            {Object.entries(registry).map(([key, cfg]) => (
+			                                <div
+			                                    key={key}
+			                                    className="space-y-1 rounded-md border border-border/60 px-3 py-2"
+			                                >
+			                                    <Text size="xs" type="secondary" className="tabular-nums">
+			                                        {key}
+			                                    </Text>
+			                                    <Text weight="medium">
+			                                        {cfg.label}
+			                                    </Text>
+			                                    <div className="flex flex-wrap gap-2">
+			                                        <Button
+			                                            size="xs"
+			                                            variant="secondary"
+			                                            buttonStyle="outline"
+			                                            onClick={() =>
+			                                                setRegistry((r) => ({
+			                                                    ...r,
+			                                                    [key]: {
+			                                                        ...r[key],
+			                                                        badge: {
+			                                                            label: 'Updated',
+			                                                            tone: 'warning',
+			                                                        },
+			                                                    },
+			                                                }))
+			                                            }
+			                                        >
+			                                            Mark updated
+			                                        </Button>
+			                                        <Button
+			                                            size="xs"
+			                                            variant="secondary"
+			                                            buttonStyle="ghost"
+			                                            onClick={() =>
+			                                                setRegistry((r) => {
+			                                                    const next = { ...r };
+			                                                    delete next[key];
+			                                                    return next;
+			                                                })
+			                                            }
+			                                        >
+			                                            Untag
+			                                        </Button>
+			                                    </div>
+			                                </div>
+			                            ))}
+			                            {Object.keys(registry).length === 0 && (
+			                                <Text size="xs" type="secondary">
+			                                    Registry empty — every reference now renders as a plain key.
+			                                </Text>
+			                            )}
+			                            <Button
+			                                size="xs"
+			                                variant="primary"
+			                                buttonStyle="solid"
+			                                onClick={() => setRegistry(RESOURCE_SEED)}
+			                            >
+			                                Restore seed
+			                            </Button>
+			                        </div>
+			                    </div>
+			                </div>
+		</>
+	);
+}
+`;function H(e){let t={h4:`h4`,...e.components};return w||W(`Examples`,!1),I||W(`Examples.CompactFeed`,!0),z||W(`Examples.CustomRows`,!0),F||W(`Examples.DefaultFeed`,!0),R||W(`Examples.EventConfiguration`,!0),B||W(`Examples.ResourceRegistry`,!0),L||W(`Examples.RichFeed`,!0),(0,E.jsxs)(s,{title:`Features · Activity feed`,description:`Interactive activity feed — generic, framework-agnostic, with headline segments, callbacks (actor / resource / action), strings, slots, mass event configuration, and a save/restore resource registry. For read-only tracking timelines (order, payment, changelog, milestones) see Composed → Timelines.`,layer:`features`,status:`ready`,children:[(0,E.jsx)(c,{title:`Default`,id:`default`,children:(0,E.jsx)(u,{name:`DefaultFeed`,source:V,children:(0,E.jsx)(F,{})})}),(0,E.jsxs)(c,{title:`Density`,id:`density`,children:[(0,E.jsx)(u,{name:`CompactFeed`,source:V,children:(0,E.jsx)(I,{})}),(0,E.jsx)(u,{name:`RichFeed`,source:V,children:(0,E.jsx)(L,{})})]}),(0,E.jsx)(c,{title:`Configuration`,id:`configuration`,children:(0,E.jsx)(u,{name:`EventConfiguration`,source:V,children:(0,E.jsx)(R,{})})}),(0,E.jsx)(c,{title:`Customization`,id:`customization`,children:(0,E.jsx)(u,{name:`CustomRows`,source:V,children:(0,E.jsx)(z,{})})}),(0,E.jsx)(c,{title:`Resource registry`,id:`resource-registry`,children:(0,E.jsx)(u,{name:`ResourceRegistry`,source:V,children:(0,E.jsx)(B,{})})}),(0,E.jsxs)(c,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`ActivityFeed`}),(0,E.jsx)(S,{component:`ActivityFeed`}),(0,E.jsx)(t.h4,{children:`ActivityFeedCard`}),(0,E.jsx)(S,{component:`ActivityFeedCard`})]})]})}function U(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(H,{...e})}):H(e)}function W(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{U as default};

package/dist/showcase/assets/activities-feed-card-B8wpu4F3.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{n,t as r}from"./isSameDay-DVNkwpSk.js";import{t as i}from"./isToday-DZ1HTCty.js";import{Er as a,Fr as o,Or as s,jr as c,r as l,yr as u}from"./example-BIrQab7K.js";import{t as d}from"./activity-B-FxNryB.js";import{t as f}from"./chevron-down-CSn8HCwf.js";import{t as p}from"./chevron-right-d-umkBru.js";import{t as m}from"./circle-dot-CvoDXS-W.js";import{t as h}from"./ellipsis-ntuo3ejh.js";import{t as g}from"./flag-CJJ43K4x.js";import{t as _}from"./heart-BWZYF4xJ.js";import{t as v}from"./mail-check-DXqQwivW.js";import{t as y}from"./mail-w1nhszbW.js";import{t as b}from"./message-square-B0RnrJV6.js";import{t as x}from"./pencil-BouoJ5x7.js";import{t as S}from"./plus-DkHZm34I.js";import{t as C}from"./shield-check-CRbBJXw2.js";import{t as w}from"./shopping-bag-B5BzpLV5.js";import{t as T}from"./sparkles-DFJmoAFP.js";import{t as E}from"./star-DK5onZCp.js";import{t as D}from"./trash-2-OsaEm8cc.js";import{t as O}from"./user-plus-MMxrhI4h.js";import{S as k,_ as A,a as j,k as M,n as N,s as P}from"./index-Cz4UGUT2.js";import{t as F}from"./smart-card-B4P_C0nk.js";import{a as I,l as L,r as R,t as z}from"./dropdown-menu-bPWrLPgm.js";function B(e,t,r){return n(e,-t,r)}function V(e,t){return r(k(t?.in||e,e),B(A(t?.in||e),1))}var H=j(`arrow-left-right`,[[`path`,{d:`M8 3 4 7l4 4`,key:`9rb6wj`}],[`path`,{d:`M4 7h16`,key:`6tx8e3`}],[`path`,{d:`m16 21 4-4-4-4`,key:`siv7j2`}],[`path`,{d:`M20 17H4`,key:`h6l3hr`}]]),ee=j(`ban`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M4.929 4.929 19.07 19.071`,key:`196cmz`}]]),te=j(`bookmark`,[[`path`,{d:`M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z`,key:`oz39mx`}]]),ne=j(`file-pen`,[[`path`,{d:`M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34`,key:`o6klzx`}],[`path`,{d:`M14 2v5a1 1 0 0 0 1 1h5`,key:`wfsgrz`}],[`path`,{d:`M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z`,key:`zhnas1`}]]),re=j(`link`,[[`path`,{d:`M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71`,key:`1cjeqo`}],[`path`,{d:`M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71`,key:`19qd67`}]]),U=j(`mail-open`,[[`path`,{d:`M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z`,key:`1jhwl8`}],[`path`,{d:`m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10`,key:`1qfld7`}]]),W=j(`mail-x`,[[`path`,{d:`M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h9`,key:`1j9vog`}],[`path`,{d:`m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7`,key:`1ocrg3`}],[`path`,{d:`m17 17 4 4`,key:`1b3523`}],[`path`,{d:`m21 17-4 4`,key:`uinynz`}]]),ie=j(`user-minus`,[[`path`,{d:`M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2`,key:`1yyitq`}],[`circle`,{cx:`9`,cy:`7`,r:`4`,key:`nufk8`}],[`line`,{x1:`22`,x2:`16`,y1:`11`,y2:`11`,key:`1shjgl`}]]),G=e(t(),1),K=P(),ae={icon:m,tone:`neutral`},oe={created:{icon:S,tone:`success`,label:`Created`},updated:{icon:x,tone:`info`,label:`Updated`},edited:{icon:ne,tone:`info`,label:`Edited`},deleted:{icon:D,tone:`destructive`,label:`Deleted`},cancelled:{icon:ee,tone:`destructive`,label:`Cancelled`},restored:{icon:T,tone:`success`,label:`Restored`},status_changed:{icon:H,tone:`primary`,label:`Status changed`},status_transition:{icon:H,tone:`primary`,label:`Status changed`},status_override:{icon:H,tone:`warning`,label:`Status overridden`},assigned:{icon:O,tone:`info`,label:`Assigned`},unassigned:{icon:ie,tone:`destructive`,label:`Unassigned`},mail_sent:{icon:y,tone:`info`,label:`Email sent`},mail_delivered:{icon:v,tone:`success`,label:`Email delivered`},mail_opened:{icon:U,tone:`info`,label:`Email opened`},mail_clicked:{icon:U,tone:`info`,label:`Email clicked`},mail_bounced:{icon:W,tone:`destructive`,label:`Email bounced`},mail_failed:{icon:W,tone:`destructive`,label:`Email failed`},comment_created:{icon:b,tone:`warning`,label:`Comment posted`},comment_deleted:{icon:b,tone:`destructive`,label:`Comment deleted`},paid:{icon:c,tone:`success`,label:`Paid`},refunded:{icon:H,tone:`warning`,label:`Refunded`},confirmed:{icon:C,tone:`success`,label:`Confirmed`},favorited:{icon:_,tone:`warning`,label:`Favorited`},ordered:{icon:w,tone:`primary`,label:`Order placed`},published:{icon:E,tone:`success`,label:`Published`},flagged:{icon:g,tone:`warning`,label:`Flagged`},linked:{icon:re,tone:`info`,label:`Linked`},failed:{icon:s,tone:`destructive`,label:`Failed`},health_check_failed:{icon:s,tone:`destructive`,label:`Health check failed`}};function se(e,t){return t[e]??ae}var q={title:`Activity`,empty:`No activity yet.`,loading:`Loading activity…`,today:`Today`,yesterday:`Yesterday`,undated:`Undated`,you:`You`,showChanges:`Show changes`,hideChanges:`Hide changes`,actionsLabel:`Activity actions`,moreLabel:`More`,sources:{comment:`Comment`,mail:`Mail`,booking_log:`Booking log`,activity_log:``,system:`System`},events:{}};function ce(e,t,n){if(!e)return t.undated;let r=new Date(e);if(i(r))return t.today;if(V(r))return t.yesterday;try{return new Intl.DateTimeFormat(n,{year:`numeric`,month:`long`,day:`numeric`}).format(r)}catch{return new Intl.DateTimeFormat(void 0,{year:`numeric`,month:`long`,day:`numeric`}).format(r)}}function le({activities:e,groupByDate:t=!0,expandedByDefault:n=!1,locale:r,strings:i,formatDateGroupLabel:a}){let[o,s]=(0,G.useState)({}),c=(0,G.useMemo)(()=>{let t=new Map;return e.map(e=>{let n=[String(e.id??``).trim(),String(e.createdAt??``).trim(),String(e.event??``).trim(),String(e.source??``).trim()].join(`:`),r=(t.get(n)??0)+1;return t.set(n,r),{activity:e,key:`${n}:${r}`}})},[e]),l=(0,G.useMemo)(()=>{if(!t)return c.length>0?[{label:``,items:c}]:[];let e=[],n=`__init__`,o=[],s=e=>a?a(e,i):ce(e,i,r);for(let t of c){let r=s(t.activity.createdAt??null);r===n?o.push(t):(o.length>0&&e.push({label:n,items:o}),n=r,o=[t])}return o.length>0&&e.push({label:n,items:o}),e},[c,t,r,i,a]),u=(0,G.useCallback)(e=>o[e]??n,[o,n]),d=(0,G.useCallback)(e=>{s(t=>({...t,[e]:!(t[e]??!1)}))},[]),f=(0,G.useCallback)((e,t)=>{s(n=>({...n,[e]:t}))},[]),p=(0,G.useCallback)(()=>{let e={};for(let t of c)e[t.activity.id]=!0;s(e)},[c]),m=(0,G.useCallback)(()=>s({}),[]);return{groups:l,total:c.length,isExpanded:u,toggleExpanded:d,setExpanded:f,expandAll:p,collapseAll:m}}function ue({resources:e,onResourcesChange:t}={}){let[n,r]=(0,G.useState)(()=>e??{}),i=(0,G.useRef)(e);(0,G.useEffect)(()=>{e!==i.current&&(i.current=e,r(e??{}))},[e]);let a=(0,G.useRef)(t);(0,G.useEffect)(()=>{a.current=t},[t]);let o=(0,G.useCallback)(e=>{a.current?.(e)},[]),s=(0,G.useCallback)((e,t)=>{r(n=>{let r={...n,[e]:t};return o(r),r})},[o]),c=(0,G.useCallback)((e,t)=>{r(n=>{let r=n[e];if(!r)return n;let i={...n,[e]:{...r,...t}};return o(i),i})},[o]),l=(0,G.useCallback)(e=>{r(t=>{if(!(e in t))return t;let n={...t};return delete n[e],o(n),n})},[o]),u=(0,G.useCallback)(e=>{r(e),o(e)},[o]),d=(0,G.useCallback)(()=>{let e=i.current??{};r(e),o(e)},[o]);return{registry:n,get:(0,G.useCallback)(e=>n[typeof e==`string`?e:e.key],[n]),register:s,update:c,remove:l,setAll:u,reset:d}}function de({activity:e,actions:t,onAction:n,label:r}){return t.length===0?null:(0,K.jsxs)(z,{children:[(0,K.jsx)(L,{render:e=>(0,K.jsx)(l,{...e,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,"aria-label":r,className:`h-7 w-7 text-muted-foreground`,children:(0,K.jsx)(h,{className:`size-4`})})}),(0,K.jsx)(R,{align:`end`,className:`min-w-[160px]`,children:t.map(t=>{let r=t.icon;return(0,K.jsxs)(I,{onClick:()=>{t.disabled||(t.onClick(e),n?.(t.id,e))},disabled:t.disabled,variant:t.tone===`destructive`?`destructive`:`default`,className:`gap-2 px-2 py-1.5 text-xs`,children:[!!r&&(0,K.jsx)(r,{className:`size-3.5`}),t.label]},t.id)})})]})}function fe({change:e}){let t=e.old!==null&&e.old!==void 0,n=e.new!==null&&e.new!==void 0;return!t&&!n?(0,K.jsx)(a,{size:`xs`,tag:`span`,children:e.description}):(0,K.jsxs)(a,{tag:`span`,size:`xs`,className:`inline-flex flex-wrap items-baseline gap-1`,children:[!!t&&(0,K.jsx)(a,{tag:`span`,size:`xs`,className:`rounded bg-destructive/10 text-destructive line-through px-1 py-px`,children:e.old}),t&&n&&(0,K.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,children:`→`}),!!n&&(0,K.jsx)(a,{tag:`span`,size:`xs`,className:`rounded bg-success/15 text-success px-1 py-px`,children:e.new})]})}function pe({changes:e,className:t}){return e.length===0?null:(0,K.jsx)(`div`,{className:N(`space-y-1.5 rounded-lg border border-border/60 bg-muted/30 px-3 py-2`,t),children:e.map(e=>(0,K.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[(0,K.jsx)(a,{size:`xs`,type:`secondary`,weight:`medium`,className:`shrink-0`,children:e.label}),(0,K.jsx)(fe,{change:e})]},`${e.key}-${e.label}`))})}function me({label:e,isFirst:t,className:n}){return e===``?null:(0,K.jsx)(a,{size:`xxs`,type:`secondary`,weight:`medium`,className:N(`uppercase tracking-wider`,!t&&`mt-5`,n),children:e})}function he({title:e,hint:t,className:n}){return(0,K.jsxs)(`div`,{className:N(`flex flex-col items-center justify-center gap-2 px-6 py-10 text-center`,n),children:[(0,K.jsx)(`span`,{className:`flex size-9 items-center justify-center rounded-full bg-muted text-muted-foreground`,children:(0,K.jsx)(d,{className:`size-4`})}),(0,K.jsx)(a,{weight:`medium`,children:e}),!!t&&(0,K.jsx)(a,{size:`xs`,type:`secondary`,children:t})]})}var J={primary:{bg:`bg-primary/10`,fg:`text-primary`,dot:`bg-primary`,line:`bg-primary/30`,chipBg:`bg-primary/5`,chipFg:`text-primary`},success:{bg:`bg-success/10`,fg:`text-success`,dot:`bg-success`,line:`bg-success/30`,chipBg:`bg-success/10`,chipFg:`text-success`},warning:{bg:`bg-warning/30`,fg:`text-warning-foreground`,dot:`bg-warning`,line:`bg-warning/40`,chipBg:`bg-warning/30`,chipFg:`text-warning-foreground`},destructive:{bg:`bg-destructive/10`,fg:`text-destructive`,dot:`bg-destructive`,line:`bg-destructive/30`,chipBg:`bg-destructive/10`,chipFg:`text-destructive`},info:{bg:`bg-info/10`,fg:`text-info`,dot:`bg-info`,line:`bg-info/30`,chipBg:`bg-info/10`,chipFg:`text-info`},neutral:{bg:`bg-muted`,fg:`text-muted-foreground`,dot:`bg-muted-foreground/60`,line:`bg-border`,chipBg:`bg-muted`,chipFg:`text-muted-foreground`}},Y={primary:`primary`,success:`success`,warning:`warning`,destructive:`destructive`,info:`info`,neutral:`secondary`};function X({resource:e,config:t,fallbackText:n,onClick:r}){let i=J[t?.tone??`neutral`],o=t?.icon??m,s=t?.label??n??e.label??e.key,c=typeof r==`function`,d=(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(o,{className:N(`size-3 shrink-0`,i.fg)}),(0,K.jsx)(a,{tag:`span`,size:`xs`,weight:`medium`,className:i.chipFg,children:s}),!!t?.tags&&t.tags.length>0&&(0,K.jsx)(a,{tag:`span`,size:`xxs`,type:`secondary`,className:`border-l border-current/20 pl-1.5 ml-0.5`,children:t.tags.join(` · `)}),!!t?.badge&&(0,K.jsx)(u,{inline:!0,variant:Y[t.badge.tone??`neutral`],className:`ml-1`,children:t.badge.label})]}),f=N(`inline-flex items-center gap-1 rounded-full px-2 py-0.5 align-baseline`,`border border-border/60`,i.chipBg,c&&`cursor-pointer transition-colors hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`);return c?(0,K.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,onClick:e=>{e.stopPropagation(),r?.()},className:N(f,`h-auto rounded-full`),title:t?.note,children:d}):(0,K.jsx)(`span`,{className:f,title:t?.note,children:d})}function Z({actorId:e,text:t,href:n,activity:r,youLabel:i,currentUserId:o,onActorClick:s}){let c=o!==void 0&&e!==void 0&&o===e?i:t,u=r.actor??{id:e,name:t};return n?(0,K.jsx)(`a`,{href:n,onClick:e=>{s&&(e.preventDefault(),e.stopPropagation(),s(u,r))},className:`font-semibold text-foreground underline-offset-2 hover:underline`,children:c}):s?(0,K.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,onClick:e=>{e.stopPropagation(),s(u,r)},className:`h-auto rounded px-0 py-0 font-semibold text-foreground underline-offset-2 hover:underline`,children:c}):(0,K.jsx)(a,{tag:`span`,weight:`semibold`,children:c})}function ge(e,t){return e.map((e,n)=>{let r=`seg-${n}-${e.type}`;switch(e.type){case`actor`:return(0,K.jsxs)(G.Fragment,{children:[(0,K.jsx)(Z,{actorId:e.actorId,text:e.text,href:e.href,activity:t.activity,youLabel:t.youLabel,currentUserId:t.currentUserId,onActorClick:t.onActorClick}),` `]},r);case`field`:case`value`:return(0,K.jsxs)(G.Fragment,{children:[(0,K.jsx)(a,{tag:`span`,weight:`semibold`,children:e.text}),` `]},r);case`status`:return(0,K.jsxs)(G.Fragment,{children:[(0,K.jsx)(u,{inline:!0,variant:Y[e.tone??`neutral`],children:e.text}),` `]},r);case`resource`:{let n=t.getResourceConfig?.(e.resource);return(0,K.jsxs)(G.Fragment,{children:[(0,K.jsx)(X,{resource:e.resource,config:n,fallbackText:e.text,onClick:t.onResourceClick?()=>t.onResourceClick?.(e.resource,n,t.activity):void 0}),` `]},r)}default:return(0,K.jsxs)(G.Fragment,{children:[(0,K.jsx)(a,{tag:`span`,children:e.text}),` `]},r)}})}function _e(e){let{activity:t}=e,n=t.headline??t.event,r=t.actor?.name;if(!r||!n.includes(r))return(0,K.jsx)(a,{tag:`span`,children:n});let[i,...o]=n.split(r);return(0,K.jsxs)(K.Fragment,{children:[!!i&&(0,K.jsx)(a,{tag:`span`,children:i}),(0,K.jsx)(Z,{actorId:t.actor?.id,text:r,href:t.actor?.href,activity:t,youLabel:e.youLabel,currentUserId:e.currentUserId,onActorClick:e.onActorClick}),o.length>0&&(0,K.jsx)(a,{tag:`span`,children:o.join(r)})]})}function ve(e){let t=e.activity.segments;return t&&t.length>0?(0,K.jsx)(`span`,{className:`leading-snug [&>span]:leading-snug`,children:ge(t,e)}):(0,K.jsx)(`span`,{className:`leading-snug`,children:_e(e)})}function ye({icon:e,tone:t,density:n,isLast:r}){let i=J[t];return n===`compact`?(0,K.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,K.jsx)(`span`,{"aria-hidden":!0,className:N(`mt-1.5 size-2 shrink-0 rounded-full`,i.dot)}),!r&&(0,K.jsx)(`span`,{"aria-hidden":!0,className:N(`mt-1 w-px flex-1`,i.line)})]}):n===`rich`?(0,K.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,K.jsx)(`span`,{className:N(`flex size-7 shrink-0 items-center justify-center rounded-full ring-1 ring-border/60`,i.bg,i.fg),children:(0,K.jsx)(e,{className:`size-3.5`})}),!r&&(0,K.jsx)(`span`,{"aria-hidden":!0,className:N(`mt-1 w-px flex-1`,i.line)})]}):(0,K.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,K.jsx)(`span`,{className:N(`flex size-5 shrink-0 items-center justify-center rounded-full`,i.bg,i.fg),children:(0,K.jsx)(e,{className:`size-3`})}),!r&&(0,K.jsx)(`span`,{"aria-hidden":!0,className:N(`mt-1 w-px flex-1`,i.line)})]})}function be(e){let{activity:t,density:n,eventConfig:r,tone:i,isLast:o,expanded:s,onToggleExpanded:c,relativeTime:d,absoluteTime:m,sourceLabel:h,youLabel:g,showChangesLabel:_,hideChangesLabel:v,actionsLabel:y,currentUserId:b,actions:x,onActivityClick:S,onActorClick:C,onResourceClick:w,onAction:T,getResourceConfig:E,headlineOverride:D,markerOverride:O}=e,k=t.iconOverride??r.icon,A=(t.changes?.length??0)>0,j=(t.metadata?.length??0)>0,M=(t.resources?.length??0)>0,P=t.description!==void 0&&t.description!==null&&t.description!==``,F=n!==`compact`,I=n===`rich`,L=D??(0,K.jsx)(ve,{activity:t,currentUserId:b,youLabel:g,onActorClick:C,onResourceClick:w,getResourceConfig:E}),R=O??(0,K.jsx)(ye,{icon:k,tone:i,density:n,isLast:o}),z=typeof S==`function`,B=A||M||x.length>0||typeof C==`function`||typeof w==`function`,V=z&&!B;return(0,K.jsxs)(`div`,{className:N(`relative flex gap-3`,z&&`cursor-pointer rounded-md hover:bg-muted/40`),onClick:z?()=>S?.(t):void 0,role:V?`button`:void 0,tabIndex:V?0:void 0,onKeyDown:V?e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),S?.(t))}:void 0,children:[R,(0,K.jsxs)(`div`,{className:N(`min-w-0 flex-1`,!o&&(n===`rich`?`pb-4`:n===`compact`?`pb-2.5`:`pb-3`)),children:[(0,K.jsxs)(`div`,{className:`flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-3`,children:[(0,K.jsxs)(`div`,{className:`flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1`,children:[(0,K.jsx)(a,{tag:`span`,lineHeight:`snug`,children:L}),!!h&&(0,K.jsx)(u,{inline:!0,variant:`secondary`,children:h}),I&&A&&(0,K.jsx)(l,{type:`button`,size:`icon-xs`,variant:`secondary`,buttonStyle:`ghost`,className:`h-5 w-5 text-muted-foreground`,onClick:e=>{e.stopPropagation(),c()},title:s?v:_,"aria-label":s?v:_,"aria-expanded":s,children:s?(0,K.jsx)(f,{className:`size-3.5`}):(0,K.jsx)(p,{className:`size-3.5`})})]}),(0,K.jsxs)(`div`,{className:`flex shrink-0 items-center gap-1`,children:[!!d&&(0,K.jsx)(a,{size:`xs`,type:`secondary`,className:`whitespace-nowrap tabular-nums pt-0.5`,title:m??void 0,children:d}),I&&x.length>0&&(0,K.jsx)(de,{activity:t,actions:x,onAction:T,label:y})]})]}),!!F&&P&&(0,K.jsx)(a,{tag:`div`,size:`xs`,type:`secondary`,className:`mt-1`,children:t.description}),!!I&&j&&t.metadata&&(0,K.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-x-3 gap-y-1`,children:t.metadata.map(e=>(0,K.jsxs)(a,{size:`xs`,type:`secondary`,children:[(0,K.jsxs)(a,{tag:`span`,size:`xs`,type:`discrete`,children:[e.label,`:`,` `]}),e.value]},e.label))}),!!I&&M&&t.resources&&(0,K.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-1.5`,children:t.resources.map(e=>{let n=E?.(e);return(0,K.jsx)(X,{resource:e,config:n,onClick:w?()=>w(e,n,t):void 0},e.key)})}),!!I&&A&&s&&t.changes&&(0,K.jsx)(`div`,{className:`mt-2`,children:(0,K.jsx)(pe,{changes:t.changes})})]})]})}function xe(e,t){try{return new Intl.DateTimeFormat(t,{dateStyle:`medium`,timeStyle:`short`}).format(new Date(e))}catch{return e}}function Se(e,t){return e.toneOverride??t}function Q(e){let{activities:t=[],density:n=`default`,groupByDate:r=!0,expandedByDefault:i=!1,currentUserId:s,loading:c=!1,eventConfig:l,strings:u,slots:d,className:f,locale:p,formatRelativeTime:m,formatAbsoluteTime:h,formatDateGroupLabel:g,getEventLabel:_,getSourceLabel:v,actionsForActivity:y,onActivityClick:b,onActorClick:x,onResourceClick:S,onAction:C,resources:w,onResourcesChange:T}=e,E=M(q,u),D=(0,G.useMemo)(()=>({...oe,...l}),[l]),O=ue({resources:w,onResourcesChange:T}),k=le({activities:t,groupByDate:r,expandedByDefault:i,locale:p,strings:E,formatDateGroupLabel:g}),{formatRelativeTime:A}=o(),j=m??A??(e=>e),P=h??(e=>xe(e,p));if(c)return(0,K.jsx)(`div`,{className:N(`activities-feed--component`,`px-2 py-4`,f),children:d?.loading??(0,K.jsx)(a,{type:`secondary`,align:`center`,children:E.loading})});if(t.length===0)return(0,K.jsx)(`div`,{className:N(`activities-feed--component`,`px-2 py-2`,f),children:d?.empty??(0,K.jsx)(he,{title:E.empty})});let F=k.groups.reduce((e,t)=>e+t.items.length,0),I=0;return(0,K.jsxs)(`div`,{className:N(`activities-feed--component flex flex-col`,f),children:[!!d?.header&&(0,K.jsx)(`div`,{className:`mb-3`,children:d.header}),(0,K.jsx)(`div`,{className:`flex flex-col`,children:k.groups.map((e,t)=>{let r=t===0;return(0,K.jsxs)(`div`,{className:N(r?``:`mt-1`),children:[d?.renderDateLabel?d.renderDateLabel(e.label,r):(0,K.jsx)(me,{label:e.label,isFirst:r,className:r?``:`mb-2`}),(0,K.jsx)(`div`,{className:N(`flex flex-col`,!!e.label&&`mt-2`),children:e.items.map((e,t)=>{let r=e.activity,i=t===0,a=++I===F,o=se(r.event,D),c=Se(r,o.tone),l=r.timestamp??(r.createdAt?j(r.createdAt):null),u=r.createdAt?P(r.createdAt):null,f=r.source?v?.(r.source)??E.sources[r.source]??o.sourceLabel??null:o.sourceLabel??null,p=f&&f.trim().length>0?f:null,m=y?.(r)??[],h={density:n,isLast:a,isFirstInGroup:i,activity:r,eventConfig:o,tone:c,relativeTime:l,absoluteTime:u,sourceLabel:p,expanded:k.isExpanded(r.id),toggleExpanded:()=>k.toggleExpanded(r.id)},g=d?.renderRow?.(r,h);if(g!==void 0)return(0,K.jsx)(`div`,{children:g},e.key);let _=d?.renderHeadline?.(r,h),w=d?.renderMarker?.(r,h);return(0,K.jsx)(be,{activity:r,density:n,eventConfig:o,tone:c,isLast:a,expanded:h.expanded,onToggleExpanded:h.toggleExpanded,relativeTime:l,absoluteTime:u,sourceLabel:p,youLabel:E.you,showChangesLabel:E.showChanges,hideChangesLabel:E.hideChanges,actionsLabel:E.actionsLabel,currentUserId:s,actions:m,onActivityClick:b,onActorClick:x,onResourceClick:S,onAction:C,getResourceConfig:e=>O.get(e),headlineOverride:_,markerOverride:w},e.key)})})]},`${e.label}-${t}`)})}),!!d?.footer&&(0,K.jsx)(`div`,{className:`mt-3`,children:d.footer})]})}Q.displayName=`ActivityFeed`;function $({title:e,titleSuffix:t,description:n,padding:r=`base`,composerSlot:i,className:a,strings:o,slots:s,...c}){let l=M(q,o),u=e??l.title;return(0,K.jsx)(F,{icon:(0,K.jsx)(d,{className:`size-4`}),title:u,titleSuffix:t,description:n,padding:r,className:a,children:(0,K.jsx)(Q,{...c,strings:o,slots:{...s,header:i??s?.header}})})}$.displayName=`ActivityFeedCard`;export{Q as n,te as r,$ as t};

package/dist/showcase/assets/activity-B-FxNryB.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.js";var t=e(`activity`,[[`path`,{d:`M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2`,key:`169zse`}]]);export{t};