@arbidocs/blocks 0.3.127 → 0.3.129
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +146 -50
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +45 -12
- package/dist/index.d.ts +45 -12
- package/dist/index.js +148 -52
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1057,83 +1057,179 @@ function MetricCard({
|
|
|
1057
1057
|
] })
|
|
1058
1058
|
] });
|
|
1059
1059
|
}
|
|
1060
|
-
var MAX_AVATARS =
|
|
1060
|
+
var MAX_AVATARS = 3;
|
|
1061
|
+
var ON_HOVER = "opacity-0 transition-opacity group-hover/workspace-card:opacity-100 group-focus-within/workspace-card:opacity-100";
|
|
1061
1062
|
function WorkspaceCard({
|
|
1062
1063
|
name,
|
|
1063
1064
|
matterRef,
|
|
1064
1065
|
description,
|
|
1065
1066
|
docCount,
|
|
1067
|
+
chatCount,
|
|
1066
1068
|
memberCount,
|
|
1067
1069
|
members = [],
|
|
1070
|
+
membersHidden = false,
|
|
1068
1071
|
updatedAt,
|
|
1069
1072
|
active = false,
|
|
1070
1073
|
busy = false,
|
|
1071
1074
|
onOpen,
|
|
1072
1075
|
icon: Icon = lucideReact.FolderLock,
|
|
1076
|
+
iconSlot,
|
|
1077
|
+
tooltipEntitySlot,
|
|
1078
|
+
cornerSlot,
|
|
1079
|
+
accent = "default",
|
|
1073
1080
|
testId,
|
|
1074
1081
|
buttonTestId,
|
|
1075
1082
|
className
|
|
1076
1083
|
}) {
|
|
1077
1084
|
const totalMembers = memberCount ?? members.length;
|
|
1078
|
-
const shownMembers = members.slice(0, MAX_AVATARS);
|
|
1085
|
+
const shownMembers = membersHidden ? [] : members.slice(0, MAX_AVATARS);
|
|
1079
1086
|
const extraMembers = totalMembers - shownMembers.length;
|
|
1080
|
-
const
|
|
1087
|
+
const actionTestId = buttonTestId ?? (testId ? `${testId}-open` : void 0);
|
|
1088
|
+
const canOpen = Boolean(onOpen) && !busy;
|
|
1089
|
+
const hue = accent && accent !== "default" ? `var(--color-${accent})` : null;
|
|
1090
|
+
const tileStyle = hue ? { backgroundColor: `color-mix(in oklab, ${hue} 14%, transparent)`, color: hue } : void 0;
|
|
1091
|
+
const openStyle = hue ? { backgroundColor: hue, color: "var(--color-background)" } : void 0;
|
|
1092
|
+
const handleKeyDown = (event) => {
|
|
1093
|
+
if (!canOpen || event.target !== event.currentTarget) return;
|
|
1094
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
1095
|
+
event.preventDefault();
|
|
1096
|
+
onOpen?.();
|
|
1097
|
+
}
|
|
1098
|
+
};
|
|
1081
1099
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1082
1100
|
react.Card,
|
|
1083
1101
|
{
|
|
1084
|
-
variant: "
|
|
1085
|
-
className: react.cn(
|
|
1102
|
+
variant: "flat",
|
|
1103
|
+
className: react.cn(
|
|
1104
|
+
"card-hover group/workspace-card relative flex h-48 w-full flex-col gap-3 overflow-hidden rounded-xl bg-card p-4 shadow-sm",
|
|
1105
|
+
canOpen && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
|
|
1106
|
+
active && "bg-primary/10 shadow-md",
|
|
1107
|
+
className
|
|
1108
|
+
),
|
|
1086
1109
|
"data-testid": testId,
|
|
1110
|
+
"data-active": active || void 0,
|
|
1111
|
+
role: canOpen ? "button" : void 0,
|
|
1112
|
+
tabIndex: canOpen ? 0 : void 0,
|
|
1113
|
+
"aria-current": active ? "page" : void 0,
|
|
1114
|
+
"aria-label": canOpen ? `Open workspace ${name}` : void 0,
|
|
1115
|
+
"aria-busy": busy || void 0,
|
|
1116
|
+
onClick: canOpen ? onOpen : void 0,
|
|
1117
|
+
onKeyDown: handleKeyDown,
|
|
1087
1118
|
children: [
|
|
1088
|
-
/* @__PURE__ */ jsxRuntime.jsxs(react.CardHeader, { className: "p-0", children: [
|
|
1089
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1119
|
+
/* @__PURE__ */ jsxRuntime.jsxs(react.CardHeader, { className: "flex flex-row items-center gap-3 space-y-0 p-0", children: [
|
|
1120
|
+
iconSlot ?? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1121
|
+
"div",
|
|
1122
|
+
{
|
|
1123
|
+
className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary",
|
|
1124
|
+
style: tileStyle,
|
|
1125
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-5" })
|
|
1126
|
+
}
|
|
1127
|
+
),
|
|
1128
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
1129
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1130
|
+
react.CardTitle,
|
|
1131
|
+
{
|
|
1132
|
+
className: "line-clamp-2 text-base font-bold leading-tight",
|
|
1133
|
+
"data-testid": testId && `${testId}-title`,
|
|
1134
|
+
children: name
|
|
1135
|
+
}
|
|
1136
|
+
),
|
|
1137
|
+
matterRef && /* @__PURE__ */ jsxRuntime.jsx(react.CardDescription, { className: "mt-0.5 truncate text-xs font-medium uppercase tracking-wide text-muted-foreground", children: matterRef })
|
|
1095
1138
|
] }),
|
|
1096
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1097
|
-
matterRef && /* @__PURE__ */ jsxRuntime.jsx(react.CardDescription, { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: matterRef })
|
|
1139
|
+
cornerSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: react.cn("shrink-0", ON_HOVER), children: cornerSlot })
|
|
1098
1140
|
] }),
|
|
1099
|
-
/* @__PURE__ */ jsxRuntime.jsxs(react.CardContent, { className: "
|
|
1100
|
-
description && /* @__PURE__ */ jsxRuntime.
|
|
1101
|
-
|
|
1102
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1103
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1104
|
-
/* @__PURE__ */ jsxRuntime.jsx("
|
|
1105
|
-
|
|
1106
|
-
] }),
|
|
1107
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 text-foreground", children: [
|
|
1108
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "size-4 text-muted-foreground" }),
|
|
1109
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: totalMembers }),
|
|
1110
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "members" })
|
|
1111
|
-
] })
|
|
1141
|
+
/* @__PURE__ */ jsxRuntime.jsxs(react.CardContent, { className: "relative flex min-h-0 flex-1 flex-col p-0", children: [
|
|
1142
|
+
description && /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip, { children: [
|
|
1143
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-sm text-muted-foreground transition-opacity group-hover/workspace-card:opacity-0 group-focus-within/workspace-card:opacity-0", children: description }) }),
|
|
1144
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.TooltipContent, { side: "top", className: "max-w-sm p-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-md", children: [
|
|
1145
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center bg-muted/70 px-3 py-2.5", children: tooltipEntitySlot ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: name }) }),
|
|
1146
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-3 text-sm leading-relaxed text-foreground/90", children: description })
|
|
1147
|
+
] }) })
|
|
1112
1148
|
] }),
|
|
1113
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1149
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1150
|
+
"span",
|
|
1151
|
+
{
|
|
1152
|
+
className: react.cn(
|
|
1153
|
+
"pointer-events-none absolute inset-0 z-10 inline-flex items-center justify-center whitespace-nowrap",
|
|
1154
|
+
!busy && "opacity-0 transition-opacity group-hover/workspace-card:opacity-100 group-focus-within/workspace-card:opacity-100"
|
|
1155
|
+
),
|
|
1156
|
+
"data-testid": actionTestId,
|
|
1157
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1158
|
+
"span",
|
|
1159
|
+
{
|
|
1160
|
+
className: react.cn(
|
|
1161
|
+
"inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-base font-semibold shadow-md",
|
|
1162
|
+
active ? "bg-muted-foreground text-background" : "bg-primary text-primary-foreground"
|
|
1163
|
+
),
|
|
1164
|
+
style: active ? void 0 : openStyle,
|
|
1165
|
+
children: active ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1166
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "size-4" }),
|
|
1167
|
+
" Current workspace"
|
|
1168
|
+
] }) : busy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1169
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }),
|
|
1170
|
+
" Opening"
|
|
1171
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1172
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftRight, { className: "size-4" }),
|
|
1173
|
+
" Open"
|
|
1174
|
+
] })
|
|
1175
|
+
}
|
|
1176
|
+
)
|
|
1177
|
+
}
|
|
1178
|
+
)
|
|
1129
1179
|
] }),
|
|
1130
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1131
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1180
|
+
/* @__PURE__ */ jsxRuntime.jsxs(react.CardFooter, { className: "mt-auto flex w-full min-w-0 flex-col items-stretch gap-3 overflow-hidden p-0", children: [
|
|
1181
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 text-sm", children: [
|
|
1182
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
|
|
1183
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Documents", children: [
|
|
1184
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-3.5 text-muted-foreground" }),
|
|
1185
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tabular-nums", children: docCount.toLocaleString() })
|
|
1186
|
+
] }),
|
|
1187
|
+
chatCount !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Chats", children: [
|
|
1188
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessagesSquare, { className: "size-3.5 text-muted-foreground" }),
|
|
1189
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tabular-nums", children: chatCount.toLocaleString() })
|
|
1190
|
+
] }),
|
|
1191
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Members", children: [
|
|
1192
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "size-3.5 text-muted-foreground" }),
|
|
1193
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1194
|
+
"span",
|
|
1195
|
+
{
|
|
1196
|
+
className: "font-medium tabular-nums",
|
|
1197
|
+
"data-testid": testId && `${testId}-member-count`,
|
|
1198
|
+
children: membersHidden ? "\u2014" : totalMembers
|
|
1199
|
+
}
|
|
1200
|
+
)
|
|
1201
|
+
] })
|
|
1202
|
+
] }),
|
|
1203
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1204
|
+
"div",
|
|
1205
|
+
{
|
|
1206
|
+
className: "ml-auto flex shrink-0 -space-x-2",
|
|
1207
|
+
"data-testid": testId && `${testId}-member-avatars`,
|
|
1208
|
+
children: [
|
|
1209
|
+
shownMembers.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Avatar, { className: "size-6 border-2 border-card", title: m.name, children: [
|
|
1210
|
+
m.picture && /* @__PURE__ */ jsxRuntime.jsx(react.AvatarImage, { src: m.picture, alt: m.name }),
|
|
1211
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.AvatarFallback, { className: "bg-foreground text-[9px] font-medium text-background", children: chunkAHWIZJ4M_cjs.initials(m.name || "?") })
|
|
1212
|
+
] }, i)),
|
|
1213
|
+
!membersHidden && extraMembers > 0 && /* @__PURE__ */ jsxRuntime.jsx(react.Avatar, { className: "size-6 border-2 border-card", children: /* @__PURE__ */ jsxRuntime.jsxs(react.AvatarFallback, { className: "bg-accent text-[9px] font-medium text-muted-foreground", children: [
|
|
1214
|
+
"+",
|
|
1215
|
+
extraMembers
|
|
1216
|
+
] }) })
|
|
1217
|
+
]
|
|
1218
|
+
}
|
|
1219
|
+
)
|
|
1220
|
+
] }),
|
|
1221
|
+
updatedAt && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1222
|
+
"span",
|
|
1223
|
+
{
|
|
1224
|
+
className: "min-w-0 max-w-full self-start truncate text-left text-xs text-muted-foreground",
|
|
1225
|
+
title: chunkAHWIZJ4M_cjs.fmtDate(updatedAt),
|
|
1226
|
+
children: [
|
|
1227
|
+
"Updated ",
|
|
1228
|
+
chunkAHWIZJ4M_cjs.fromNow(updatedAt)
|
|
1229
|
+
]
|
|
1230
|
+
}
|
|
1231
|
+
)
|
|
1232
|
+
] })
|
|
1137
1233
|
]
|
|
1138
1234
|
}
|
|
1139
1235
|
);
|