@assure-one/design-system 1.41.2 → 1.43.0
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/brand-scope-BOKu4iOc.d.ts +262 -0
- package/dist/{chunk-UAPQ7VTS.js → chunk-LUWPEBXZ.js} +283 -178
- package/dist/chunk-LUWPEBXZ.js.map +1 -0
- package/dist/{chunk-AF3QYJ24.js → chunk-TBDTXAFH.js} +6 -4
- package/dist/chunk-TBDTXAFH.js.map +1 -0
- package/dist/{chunk-JKNHNNNY.js → chunk-TYXT5C2B.js} +95 -11
- package/dist/chunk-TYXT5C2B.js.map +1 -0
- package/dist/{chunk-XN7OBLQR.js → chunk-XJKCKBHI.js} +20 -16
- package/dist/chunk-XJKCKBHI.js.map +1 -0
- package/dist/css/components.css +1 -1
- package/dist/css/tokens.css +4 -4
- package/dist/{data-table-view-ep8al7P9.d.ts → data-table-view-BWhKeUiw.d.ts} +186 -2
- package/dist/{design-system-provider-CfD2g2lY.d.ts → design-system-provider-Coe2S3Lh.d.ts} +1 -1
- package/dist/icons/index.d.ts +5 -1
- package/dist/icons/index.js +1 -1
- package/dist/index.d.ts +290 -455
- package/dist/index.js +636 -250
- package/dist/index.js.map +1 -1
- package/dist/legacy/index.d.ts +11 -4
- package/dist/legacy/index.js +3 -3
- package/dist/next/index.d.ts +2 -2
- package/dist/styles.css +1 -1
- package/dist/suite/index.d.ts +14 -3
- package/dist/suite/index.js +3 -3
- package/dist/{types-Coqw8iaS.d.ts → types-DlqmlVyZ.d.ts} +11 -1
- package/docs/components.md +11 -8
- package/docs/components.registry.json +89 -22
- package/package.json +1 -1
- package/dist/brand-scope-BOHId6BY.d.ts +0 -58
- package/dist/chunk-AF3QYJ24.js.map +0 -1
- package/dist/chunk-JKNHNNNY.js.map +0 -1
- package/dist/chunk-UAPQ7VTS.js.map +0 -1
- package/dist/chunk-XN7OBLQR.js.map +0 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { slot, badgeAnatomy, stateAttributes, useDsMessages, deprecate, paginationAnatomy, Select, microInteractions, useFieldsetContext, useFieldControl, useControllableState, useMergedRefs, switchAnatomy, CONTROL_LABEL_TEXT, tableAnatomy, Pressable, FormBridge, CONTROL_SIZE_CLASSES, FileUpload, FileChip, Button, Tooltip, TooltipTrigger, TooltipContent, Avatar, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, dataTableAnatomy, Checkbox, DocumentDetailPanel, DocumentDetailHeader, DocumentDetailTitle, DocumentDetailRequester, DocumentDetailMetaRow, DocumentDetailActions, DropdownMenuItem, DocumentList, DocumentRow, DocumentListSection, Textarea, DropdownMenuCheckboxItem, Popover, PopoverTrigger, PopoverContent, PopoverClose, DropdownMenuShortcut, useId as useId$1 } from './chunk-
|
|
2
|
-
import { cn, ShieldIcon, UploadIcon, SendIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpDownIcon, LockIcon, TrashIcon, HelpCircleIcon, ArrowRightIcon, CheckIcon, EyeIcon, FileTextIcon, CloseIcon, SparklesIcon, PlusIcon, SearchIcon, AlertTriangleIcon, FolderClosedIcon, CalendarIcon, PencilIcon, LockOpenIcon, FlagIcon, CheckCircleSolidIcon, DownloadIcon, XCircleSolidIcon, MessageCircleIcon, BellIcon, PaperclipIcon, UsersIcon, ClockIcon, PlayIcon, PauseIcon, StopIcon, SettingsIcon, Trash2Icon, FileIcon, SparkleIcon, MailIcon } from './chunk-
|
|
1
|
+
import { slot, badgeAnatomy, stateAttributes, useDsMessages, deprecate, paginationAnatomy, Select, microInteractions, useFieldsetContext, useFieldControl, useControllableState, useMergedRefs, switchAnatomy, CONTROL_LABEL_TEXT, tableAnatomy, Pressable, FormBridge, CONTROL_SIZE_CLASSES, FileUpload, FileChip, Button, Tooltip, TooltipTrigger, TooltipContent, Avatar, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, dataTableAnatomy, Checkbox, DocumentDetailPanel, DocumentDetailHeader, DocumentDetailTitle, DocumentDetailRequester, DocumentDetailMetaRow, DocumentDetailActions, DropdownMenuItem, DocumentList, DocumentRow, DocumentListSection, Textarea, DropdownMenuCheckboxItem, Popover, PopoverTrigger, PopoverContent, PopoverClose, DropdownMenuShortcut, useId as useId$1 } from './chunk-XJKCKBHI.js';
|
|
2
|
+
import { cn, ShieldIcon, UploadIcon, SendIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpDownIcon, LockIcon, TrashIcon, HelpCircleIcon, ArrowRightIcon, CheckIcon, EyeIcon, FileTextIcon, CloseIcon, SparklesIcon, PlusIcon, SearchIcon, AlertTriangleIcon, FolderClosedIcon, CalendarIcon, PencilIcon, LockOpenIcon, FlagIcon, CheckCircleSolidIcon, DownloadIcon, XCircleSolidIcon, MessageCircleIcon, BellIcon, PaperclipIcon, UsersIcon, ClockIcon, PlayIcon, PauseIcon, StopIcon, SettingsIcon, Trash2Icon, FileIcon, SparkleIcon, MailIcon } from './chunk-TBDTXAFH.js';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
|
-
import * as
|
|
4
|
+
import * as React2 from 'react';
|
|
5
5
|
import { forwardRef, useMemo, createContext, useRef, useContext, useState, useCallback, useEffect, useId } from 'react';
|
|
6
6
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
7
7
|
import { cva } from 'class-variance-authority';
|
|
8
8
|
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
9
9
|
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
10
|
-
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
11
10
|
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
11
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
12
12
|
|
|
13
13
|
var LEGACY_PAIRS = {
|
|
14
14
|
default: { variant: "solid", intent: "brand" },
|
|
@@ -84,7 +84,7 @@ function badgeVariants({
|
|
|
84
84
|
} = {}) {
|
|
85
85
|
const pair = resolveBadgeAppearance({ variant, intent });
|
|
86
86
|
return clsx(
|
|
87
|
-
"ds:inline-flex ds:items-center ds:gap-1 ds:tabular-nums",
|
|
87
|
+
"ds:inline-flex ds:items-center ds:gap-1 ds:whitespace-nowrap ds:tabular-nums",
|
|
88
88
|
SHAPE[shape ?? "legacy"],
|
|
89
89
|
"ds:border ds:font-medium",
|
|
90
90
|
APPEARANCE[pair.variant][pair.intent],
|
|
@@ -116,7 +116,7 @@ var Badge = forwardRef(function Badge2({ variant, intent, size, shape, dot, icon
|
|
|
116
116
|
"span",
|
|
117
117
|
{
|
|
118
118
|
...slot(badgeAnatomy, "icon"),
|
|
119
|
-
className: "ds:inline-flex ds:size-3.5 ds:shrink-0",
|
|
119
|
+
className: "ds:inline-flex ds:size-3.5 ds:shrink-0 ds:items-center ds:justify-center ds:[&>svg]:max-h-full ds:[&>svg]:max-w-full",
|
|
120
120
|
"aria-hidden": "true",
|
|
121
121
|
children: icon
|
|
122
122
|
}
|
|
@@ -172,7 +172,14 @@ var categoryTagVariants = cva(
|
|
|
172
172
|
);
|
|
173
173
|
var CategoryTag = forwardRef(function CategoryTag2({ label, icon, tone, className, ...props }, ref) {
|
|
174
174
|
return /* @__PURE__ */ jsxs("span", { ref, className: cn(categoryTagVariants({ tone }), className), ...props, children: [
|
|
175
|
-
icon && /* @__PURE__ */ jsx(
|
|
175
|
+
icon && /* @__PURE__ */ jsx(
|
|
176
|
+
"span",
|
|
177
|
+
{
|
|
178
|
+
className: "ds:inline-flex ds:size-3.5 ds:shrink-0 ds:items-center ds:justify-center ds:[&>svg]:max-h-full ds:[&>svg]:max-w-full",
|
|
179
|
+
"aria-hidden": "true",
|
|
180
|
+
children: icon
|
|
181
|
+
}
|
|
182
|
+
),
|
|
176
183
|
label
|
|
177
184
|
] });
|
|
178
185
|
});
|
|
@@ -250,6 +257,49 @@ var DocumentsWorkspaceLayout = forwardRef(function DocumentsWorkspaceLayout2({ c
|
|
|
250
257
|
);
|
|
251
258
|
});
|
|
252
259
|
DocumentsWorkspaceLayout.displayName = "DocumentsWorkspaceLayout";
|
|
260
|
+
var SKELETON_SURFACE = cn(
|
|
261
|
+
"skeleton ds:bg-skeleton ds:relative ds:overflow-hidden",
|
|
262
|
+
"ds:after:absolute ds:after:inset-0 ds:after:-translate-x-full",
|
|
263
|
+
"ds:after:bg-[linear-gradient(90deg,transparent,var(--color-skeleton-sheen),transparent)]",
|
|
264
|
+
"ds:motion-safe:after:animate-skeleton-shimmer"
|
|
265
|
+
);
|
|
266
|
+
var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
|
|
267
|
+
return /* @__PURE__ */ jsx(
|
|
268
|
+
"div",
|
|
269
|
+
{
|
|
270
|
+
ref,
|
|
271
|
+
className: cn(SKELETON_SURFACE, "ds:rounded-icon", className),
|
|
272
|
+
"aria-hidden": "true",
|
|
273
|
+
...props
|
|
274
|
+
}
|
|
275
|
+
);
|
|
276
|
+
});
|
|
277
|
+
Skeleton.displayName = "Skeleton";
|
|
278
|
+
var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
|
|
279
|
+
return /* @__PURE__ */ jsx("div", { ref, className: cn("ds:space-y-2", className), "aria-hidden": "true", ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
|
|
280
|
+
"div",
|
|
281
|
+
{
|
|
282
|
+
className: cn(SKELETON_SURFACE, "ds:rounded-icon ds:h-4", i === lines - 1 && "ds:w-3/4")
|
|
283
|
+
},
|
|
284
|
+
i
|
|
285
|
+
)) });
|
|
286
|
+
});
|
|
287
|
+
SkeletonText.displayName = "SkeletonText";
|
|
288
|
+
var SkeletonCircle = forwardRef(
|
|
289
|
+
function SkeletonCircle2({ size = 40, className, ...props }, ref) {
|
|
290
|
+
return /* @__PURE__ */ jsx(
|
|
291
|
+
"div",
|
|
292
|
+
{
|
|
293
|
+
ref,
|
|
294
|
+
className: cn(SKELETON_SURFACE, "ds:rounded-full", className),
|
|
295
|
+
style: { width: size, height: size },
|
|
296
|
+
"aria-hidden": "true",
|
|
297
|
+
...props
|
|
298
|
+
}
|
|
299
|
+
);
|
|
300
|
+
}
|
|
301
|
+
);
|
|
302
|
+
SkeletonCircle.displayName = "SkeletonCircle";
|
|
253
303
|
function getPageNumbers(current, total, siblings) {
|
|
254
304
|
const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
255
305
|
const totalSlots = siblings * 2 + 5;
|
|
@@ -271,7 +321,8 @@ function getPageNumbers(current, total, siblings) {
|
|
|
271
321
|
var NAV_BUTTON = cn(
|
|
272
322
|
"ds:inline-flex ds:size-7 ds:items-center ds:justify-center ds:rounded-btn ds:text-fg-3",
|
|
273
323
|
"ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
|
|
274
|
-
|
|
324
|
+
// Pressed takes the control press wash (Polish 2 §3.7, as ghost buttons do).
|
|
325
|
+
"ds:hover:bg-surface-hover ds:hover:text-fg ds:active:bg-control-active-bg",
|
|
275
326
|
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
276
327
|
"ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled"
|
|
277
328
|
);
|
|
@@ -338,7 +389,7 @@ var Pagination = forwardRef(function Pagination2({
|
|
|
338
389
|
ref,
|
|
339
390
|
"aria-label": messages.region(currentPage, totalPages),
|
|
340
391
|
...slot(paginationAnatomy, "root"),
|
|
341
|
-
className: cn("ds:flex ds:items-center ds:justify-between ds:gap-4", className),
|
|
392
|
+
className: cn("ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-x-4 ds:gap-y-2", className),
|
|
342
393
|
...props,
|
|
343
394
|
children: [
|
|
344
395
|
/* @__PURE__ */ jsx(
|
|
@@ -370,7 +421,7 @@ var Pagination = forwardRef(function Pagination2({
|
|
|
370
421
|
]
|
|
371
422
|
}
|
|
372
423
|
),
|
|
373
|
-
/* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "ds:flex ds:items-center ds:gap-0.5", children: [
|
|
424
|
+
/* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "ds:flex ds:items-center ds:gap-0.5 ds:max-sm:ml-auto", children: [
|
|
374
425
|
/* @__PURE__ */ jsx(
|
|
375
426
|
"button",
|
|
376
427
|
{
|
|
@@ -404,7 +455,7 @@ var Pagination = forwardRef(function Pagination2({
|
|
|
404
455
|
...stateAttributes({ selected: page === currentPage }),
|
|
405
456
|
className: cn(
|
|
406
457
|
PAGE_BUTTON_BASE,
|
|
407
|
-
page === currentPage ? "ds:bg-accent-tint ds:text-accent-2 ds:border ds:border-[color:var(--color-accent-tint)]" : "ds:text-fg-3 ds:hover:bg-surface-hover ds:hover:text-fg"
|
|
458
|
+
page === currentPage ? "ds:bg-accent-tint ds:text-accent-2 ds:border ds:border-[color:var(--color-accent-tint)]" : "ds:text-fg-3 ds:hover:bg-surface-hover ds:hover:text-fg ds:active:bg-control-active-bg"
|
|
408
459
|
),
|
|
409
460
|
children: page
|
|
410
461
|
},
|
|
@@ -910,7 +961,7 @@ var switchThumbVariants = cva(
|
|
|
910
961
|
}
|
|
911
962
|
}
|
|
912
963
|
);
|
|
913
|
-
var Switch =
|
|
964
|
+
var Switch = React2.forwardRef(
|
|
914
965
|
function Switch2({
|
|
915
966
|
label,
|
|
916
967
|
size,
|
|
@@ -944,8 +995,8 @@ var Switch = React4.forwardRef(
|
|
|
944
995
|
defaultProp: defaultChecked ?? false,
|
|
945
996
|
onChange: onCheckedChange
|
|
946
997
|
});
|
|
947
|
-
const initialChecked =
|
|
948
|
-
const rootRef =
|
|
998
|
+
const initialChecked = React2.useRef(checkedProp ?? defaultChecked ?? false);
|
|
999
|
+
const rootRef = React2.useRef(null);
|
|
949
1000
|
useFormReset(rootRef, () => setChecked(initialChecked.current), form);
|
|
950
1001
|
const mergedRef = useMergedRefs(ref, rootRef);
|
|
951
1002
|
const root = /* @__PURE__ */ jsx(
|
|
@@ -1273,136 +1324,14 @@ var TableCaption = forwardRef(
|
|
|
1273
1324
|
}
|
|
1274
1325
|
);
|
|
1275
1326
|
TableCaption.displayName = "TableCaption";
|
|
1276
|
-
var
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
return /* @__PURE__ */ jsx(
|
|
1284
|
-
TabsPrimitive.List,
|
|
1285
|
-
{
|
|
1286
|
-
ref,
|
|
1287
|
-
className: cn("ds:border-rule ds:flex ds:items-center ds:gap-0 ds:border-b", className),
|
|
1288
|
-
...props
|
|
1289
|
-
}
|
|
1290
|
-
);
|
|
1291
|
-
});
|
|
1292
|
-
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
1293
|
-
var triggerVariants = cva(
|
|
1294
|
-
cn(
|
|
1295
|
-
"ds:inline-flex ds:items-center ds:justify-center ds:gap-2 ds:text-(length:--control-font-size-md) ds:font-medium",
|
|
1296
|
-
"ds:text-fg-3",
|
|
1297
|
-
microInteractions.selection,
|
|
1298
|
-
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
1299
|
-
"ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled",
|
|
1300
|
-
"ds:hover:text-fg"
|
|
1301
|
-
),
|
|
1302
|
-
{
|
|
1303
|
-
variants: {
|
|
1304
|
-
variant: {
|
|
1305
|
-
// §5.16: tab current = 2px accent underline + bold foreground text.
|
|
1306
|
-
// The cyan rule carries the brand statement (tabs are interaction,
|
|
1307
|
-
// so cyan; Pro purple is reserved for selection state on
|
|
1308
|
-
// list/dropdown surfaces). The active LABEL stays in `text-fg` for
|
|
1309
|
-
// legibility — accent on text was too low-contrast against the page
|
|
1310
|
-
// background, especially in dark mode.
|
|
1311
|
-
underline: cn(
|
|
1312
|
-
"ds:rounded-none ds:bg-transparent ds:px-3.5 ds:py-2.5",
|
|
1313
|
-
"ds:border-b-2 ds:border-transparent ds:-mb-px",
|
|
1314
|
-
"ds:data-[state=active]:border-accent ds:data-[state=active]:text-fg ds:data-[state=active]:font-semibold"
|
|
1315
|
-
),
|
|
1316
|
-
pill: cn(
|
|
1317
|
-
"ds:rounded-pill ds:px-3 ds:py-1.5",
|
|
1318
|
-
"ds:data-[state=active]:bg-brand-bg ds:data-[state=active]:text-brand"
|
|
1319
|
-
)
|
|
1320
|
-
}
|
|
1321
|
-
},
|
|
1322
|
-
defaultVariants: {
|
|
1323
|
-
variant: "underline"
|
|
1324
|
-
}
|
|
1325
|
-
}
|
|
1327
|
+
var SELECTED_STATE_CLASSES = "ds:data-[state=on]:bg-brand-bg ds:data-[state=on]:text-brand ds:aria-checked:bg-brand-bg ds:aria-checked:text-brand ds:aria-pressed:bg-brand-bg ds:aria-pressed:text-brand";
|
|
1328
|
+
var SEGMENTED_ITEM_CLASSES = cn(
|
|
1329
|
+
"ds:rounded-control",
|
|
1330
|
+
"ds:not-aria-checked:not-aria-pressed:hover:bg-transparent ds:not-aria-checked:not-aria-pressed:hover:text-fg-2",
|
|
1331
|
+
"ds:data-[state=on]:bg-surface ds:data-[state=on]:text-fg ds:data-[state=on]:shadow-quiet",
|
|
1332
|
+
"ds:aria-checked:bg-surface ds:aria-checked:text-fg ds:aria-checked:shadow-quiet ds:aria-checked:hover:bg-surface ds:aria-checked:hover:text-fg",
|
|
1333
|
+
"ds:aria-pressed:bg-surface ds:aria-pressed:text-fg ds:aria-pressed:shadow-quiet ds:aria-pressed:hover:bg-surface ds:aria-pressed:hover:text-fg"
|
|
1326
1334
|
);
|
|
1327
|
-
var TabsTrigger = React4.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
|
|
1328
|
-
return /* @__PURE__ */ jsx(
|
|
1329
|
-
TabsPrimitive.Trigger,
|
|
1330
|
-
{
|
|
1331
|
-
ref,
|
|
1332
|
-
className: cn(triggerVariants({ variant }), className),
|
|
1333
|
-
...props
|
|
1334
|
-
}
|
|
1335
|
-
);
|
|
1336
|
-
});
|
|
1337
|
-
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
1338
|
-
var TabsContent = React4.forwardRef(function TabsContent2({ className, ...props }, ref) {
|
|
1339
|
-
return /* @__PURE__ */ jsx(
|
|
1340
|
-
TabsPrimitive.Content,
|
|
1341
|
-
{
|
|
1342
|
-
ref,
|
|
1343
|
-
className: cn(
|
|
1344
|
-
"ds:mt-3 ds:focus-visible:outline-none",
|
|
1345
|
-
"ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
1346
|
-
className
|
|
1347
|
-
),
|
|
1348
|
-
...props
|
|
1349
|
-
}
|
|
1350
|
-
);
|
|
1351
|
-
});
|
|
1352
|
-
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
1353
|
-
var UNASSIGNED_VALUE = "__unassigned__";
|
|
1354
|
-
function TeamMemberSelect({
|
|
1355
|
-
teamMembers,
|
|
1356
|
-
currentUserId,
|
|
1357
|
-
value,
|
|
1358
|
-
onValueChange,
|
|
1359
|
-
includeUnassigned = true,
|
|
1360
|
-
placeholder = "Select team member...",
|
|
1361
|
-
className
|
|
1362
|
-
}) {
|
|
1363
|
-
const options = React4.useMemo(() => {
|
|
1364
|
-
const meBadge = /* @__PURE__ */ jsx(
|
|
1365
|
-
Badge,
|
|
1366
|
-
{
|
|
1367
|
-
variant: "secondary",
|
|
1368
|
-
size: "sm",
|
|
1369
|
-
className: "ds:px-1.5 ds:py-0 ds:font-mono ds:text-[10px] ds:tracking-wider ds:uppercase",
|
|
1370
|
-
children: "Me"
|
|
1371
|
-
}
|
|
1372
|
-
);
|
|
1373
|
-
const sorted = [...teamMembers].sort((a, b) => {
|
|
1374
|
-
if (currentUserId) {
|
|
1375
|
-
if (a.id === currentUserId) return -1;
|
|
1376
|
-
if (b.id === currentUserId) return 1;
|
|
1377
|
-
}
|
|
1378
|
-
return a.fullName.localeCompare(b.fullName);
|
|
1379
|
-
});
|
|
1380
|
-
const memberOptions = sorted.map((m) => ({
|
|
1381
|
-
value: m.id,
|
|
1382
|
-
label: m.fullName,
|
|
1383
|
-
labelSuffix: m.id === currentUserId ? meBadge : void 0
|
|
1384
|
-
}));
|
|
1385
|
-
if (includeUnassigned) {
|
|
1386
|
-
return [{ value: UNASSIGNED_VALUE, label: "Unassigned" }, ...memberOptions];
|
|
1387
|
-
}
|
|
1388
|
-
return memberOptions;
|
|
1389
|
-
}, [teamMembers, currentUserId, includeUnassigned]);
|
|
1390
|
-
const innerValue = value === "" ? UNASSIGNED_VALUE : value;
|
|
1391
|
-
const handleChange = (next) => {
|
|
1392
|
-
onValueChange(next === UNASSIGNED_VALUE ? "" : next);
|
|
1393
|
-
};
|
|
1394
|
-
return /* @__PURE__ */ jsx(
|
|
1395
|
-
Select,
|
|
1396
|
-
{
|
|
1397
|
-
options,
|
|
1398
|
-
value: innerValue,
|
|
1399
|
-
onValueChange: handleChange,
|
|
1400
|
-
placeholder,
|
|
1401
|
-
className
|
|
1402
|
-
}
|
|
1403
|
-
);
|
|
1404
|
-
}
|
|
1405
|
-
TeamMemberSelect.displayName = "TeamMemberSelect";
|
|
1406
1335
|
var itemVariants = cva(
|
|
1407
1336
|
cn(
|
|
1408
1337
|
"ds:inline-flex ds:items-center ds:justify-center ds:rounded-pill ds:px-3 ds:py-1.5 ds:text-(length:--control-font-size-md) ds:font-medium",
|
|
@@ -1411,13 +1340,14 @@ var itemVariants = cva(
|
|
|
1411
1340
|
"ds:hover:bg-surface-hover ds:hover:text-fg",
|
|
1412
1341
|
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
1413
1342
|
"ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
|
|
1414
|
-
|
|
1343
|
+
SELECTED_STATE_CLASSES
|
|
1415
1344
|
),
|
|
1416
1345
|
{
|
|
1417
1346
|
variants: {
|
|
1418
1347
|
variant: {
|
|
1419
1348
|
default: "",
|
|
1420
|
-
outline: "ds:border ds:border-rule-strong ds:bg-surface"
|
|
1349
|
+
outline: "ds:border ds:border-rule-strong ds:bg-surface",
|
|
1350
|
+
segmented: SEGMENTED_ITEM_CLASSES
|
|
1421
1351
|
}
|
|
1422
1352
|
},
|
|
1423
1353
|
defaultVariants: {
|
|
@@ -1433,13 +1363,14 @@ var sizedItemVariants = cva(
|
|
|
1433
1363
|
"ds:hover:bg-surface-hover ds:hover:text-fg",
|
|
1434
1364
|
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
1435
1365
|
"ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
|
|
1436
|
-
|
|
1366
|
+
SELECTED_STATE_CLASSES
|
|
1437
1367
|
),
|
|
1438
1368
|
{
|
|
1439
1369
|
variants: {
|
|
1440
1370
|
variant: {
|
|
1441
1371
|
default: "",
|
|
1442
|
-
outline: "ds:border ds:border-rule-strong ds:bg-surface"
|
|
1372
|
+
outline: "ds:border ds:border-rule-strong ds:bg-surface",
|
|
1373
|
+
segmented: SEGMENTED_ITEM_CLASSES
|
|
1443
1374
|
}
|
|
1444
1375
|
},
|
|
1445
1376
|
defaultVariants: {
|
|
@@ -1447,11 +1378,11 @@ var sizedItemVariants = cva(
|
|
|
1447
1378
|
}
|
|
1448
1379
|
}
|
|
1449
1380
|
);
|
|
1450
|
-
var ToggleGroupContext =
|
|
1381
|
+
var ToggleGroupContext = React2.createContext({
|
|
1451
1382
|
variant: "default",
|
|
1452
1383
|
size: void 0
|
|
1453
1384
|
});
|
|
1454
|
-
var ToggleGroup =
|
|
1385
|
+
var ToggleGroup = React2.forwardRef(function ToggleGroup2({
|
|
1455
1386
|
className,
|
|
1456
1387
|
variant,
|
|
1457
1388
|
size,
|
|
@@ -1493,11 +1424,11 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
|
|
|
1493
1424
|
defaultProp: defaultValue ?? emptyValue,
|
|
1494
1425
|
onChange: onValueChange
|
|
1495
1426
|
});
|
|
1496
|
-
const initialValue =
|
|
1497
|
-
const rootRef =
|
|
1427
|
+
const initialValue = React2.useRef(valueProp ?? defaultValue ?? emptyValue);
|
|
1428
|
+
const rootRef = React2.useRef(null);
|
|
1498
1429
|
const mergedRef = useMergedRefs(ref, rootRef);
|
|
1499
1430
|
const labelledBy = wiring["aria-labelledby"] ?? (fieldset?.legendMounted ? fieldset.legendId : void 0);
|
|
1500
|
-
const context =
|
|
1431
|
+
const context = React2.useMemo(() => ({ variant, size }), [variant, size]);
|
|
1501
1432
|
const radixProps = {
|
|
1502
1433
|
...props,
|
|
1503
1434
|
type,
|
|
@@ -1516,7 +1447,14 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
|
|
|
1516
1447
|
"aria-invalid": ariaInvalid ?? wiring["aria-invalid"],
|
|
1517
1448
|
"data-invalid": wiring["data-invalid"],
|
|
1518
1449
|
...size ? stateAttributes({ size }) : void 0,
|
|
1519
|
-
className: cn(
|
|
1450
|
+
className: cn(
|
|
1451
|
+
"ds:inline-flex ds:items-center ds:gap-1",
|
|
1452
|
+
// The `segmented` track: quiet surface-sunken well, hairline
|
|
1453
|
+
// rule-soft border, control radius, 2px inset padding for the
|
|
1454
|
+
// thumb to sit inside. Matches `TabsList`'s own `segmented` track.
|
|
1455
|
+
variant === "segmented" && "ds:bg-surface-2 ds:rounded-control ds:border-rule-soft ds:gap-0.5 ds:border ds:p-0.5",
|
|
1456
|
+
className
|
|
1457
|
+
),
|
|
1520
1458
|
...radixProps,
|
|
1521
1459
|
children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children })
|
|
1522
1460
|
}
|
|
@@ -1537,8 +1475,8 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
|
|
|
1537
1475
|
] });
|
|
1538
1476
|
});
|
|
1539
1477
|
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
1540
|
-
var ToggleGroupItem =
|
|
1541
|
-
const ctx =
|
|
1478
|
+
var ToggleGroupItem = React2.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
|
|
1479
|
+
const ctx = React2.useContext(ToggleGroupContext);
|
|
1542
1480
|
const resolvedVariant = variant ?? ctx.variant;
|
|
1543
1481
|
return /* @__PURE__ */ jsx(
|
|
1544
1482
|
ToggleGroupPrimitive.Item,
|
|
@@ -1553,6 +1491,162 @@ var ToggleGroupItem = React4.forwardRef(function ToggleGroupItem2({ className, v
|
|
|
1553
1491
|
);
|
|
1554
1492
|
});
|
|
1555
1493
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
1494
|
+
var Tabs = React2.forwardRef(
|
|
1495
|
+
function Tabs2({ className, ...props }, ref) {
|
|
1496
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, className: cn(className), ...props });
|
|
1497
|
+
}
|
|
1498
|
+
);
|
|
1499
|
+
Tabs.displayName = TabsPrimitive.Root.displayName;
|
|
1500
|
+
var TabsList = React2.forwardRef(function TabsList2({ className, variant = "default", ...props }, ref) {
|
|
1501
|
+
return /* @__PURE__ */ jsx(
|
|
1502
|
+
TabsPrimitive.List,
|
|
1503
|
+
{
|
|
1504
|
+
ref,
|
|
1505
|
+
className: cn(
|
|
1506
|
+
"ds:flex ds:items-center",
|
|
1507
|
+
variant === "segmented" ? (
|
|
1508
|
+
// A track, not a row: hugs its segments (inline-flex + w-fit)
|
|
1509
|
+
// instead of stretching to the parent's width like the flush
|
|
1510
|
+
// underline row does. A consumer's own width class (passed via
|
|
1511
|
+
// `className`, after this in the merge) still wins.
|
|
1512
|
+
"ds:inline-flex ds:w-fit ds:rounded-control ds:border-rule-soft ds:bg-surface-2 ds:gap-0.5 ds:border ds:p-0.5"
|
|
1513
|
+
) : "ds:border-rule ds:gap-0 ds:border-b",
|
|
1514
|
+
className
|
|
1515
|
+
),
|
|
1516
|
+
...props
|
|
1517
|
+
}
|
|
1518
|
+
);
|
|
1519
|
+
});
|
|
1520
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
1521
|
+
var triggerVariants = cva(
|
|
1522
|
+
cn(
|
|
1523
|
+
"ds:inline-flex ds:items-center ds:justify-center ds:gap-2 ds:text-(length:--control-font-size-md) ds:font-medium",
|
|
1524
|
+
"ds:text-fg-3",
|
|
1525
|
+
microInteractions.selection,
|
|
1526
|
+
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
1527
|
+
"ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled",
|
|
1528
|
+
"ds:hover:text-fg"
|
|
1529
|
+
),
|
|
1530
|
+
{
|
|
1531
|
+
variants: {
|
|
1532
|
+
variant: {
|
|
1533
|
+
// §5.16: tab current = 2px accent underline + bold foreground text.
|
|
1534
|
+
// The cyan rule carries the brand statement (tabs are interaction,
|
|
1535
|
+
// so cyan; Pro purple is reserved for selection state on
|
|
1536
|
+
// list/dropdown surfaces). The active LABEL stays in `text-fg` for
|
|
1537
|
+
// legibility — accent on text was too low-contrast against the page
|
|
1538
|
+
// background, especially in dark mode.
|
|
1539
|
+
underline: cn(
|
|
1540
|
+
"ds:rounded-none ds:bg-transparent ds:px-3.5 ds:py-2.5",
|
|
1541
|
+
"ds:border-b-2 ds:border-transparent ds:-mb-px",
|
|
1542
|
+
"ds:data-[state=active]:border-accent ds:data-[state=active]:text-fg ds:data-[state=active]:font-semibold",
|
|
1543
|
+
"ds:aria-selected:border-accent ds:aria-selected:text-fg ds:aria-selected:font-semibold"
|
|
1544
|
+
),
|
|
1545
|
+
pill: cn(
|
|
1546
|
+
"ds:rounded-pill ds:px-3 ds:py-1.5",
|
|
1547
|
+
"ds:data-[state=active]:bg-brand-bg ds:data-[state=active]:text-brand",
|
|
1548
|
+
"ds:aria-selected:bg-brand-bg ds:aria-selected:text-brand"
|
|
1549
|
+
),
|
|
1550
|
+
// The `TabsList variant="segmented"` track's thumb: a raised
|
|
1551
|
+
// `surface` tile (quiet shadow, full-ink `fg`) over quiet fg-3
|
|
1552
|
+
// labels that lift to fg-2 on hover. The hover rule is scoped to
|
|
1553
|
+
// `not-aria-selected` so it never competes by stylesheet order with
|
|
1554
|
+
// the thumb's own (higher-specificity, compound) hover rule below.
|
|
1555
|
+
segmented: cn(
|
|
1556
|
+
"ds:rounded-control ds:px-3 ds:py-1.5",
|
|
1557
|
+
"ds:not-aria-selected:hover:text-fg-2",
|
|
1558
|
+
"ds:data-[state=active]:bg-surface ds:data-[state=active]:text-fg ds:data-[state=active]:shadow-quiet ds:data-[state=active]:font-semibold",
|
|
1559
|
+
"ds:aria-selected:bg-surface ds:aria-selected:text-fg ds:aria-selected:shadow-quiet ds:aria-selected:font-semibold",
|
|
1560
|
+
"ds:aria-selected:hover:bg-surface ds:aria-selected:hover:text-fg"
|
|
1561
|
+
)
|
|
1562
|
+
}
|
|
1563
|
+
},
|
|
1564
|
+
defaultVariants: {
|
|
1565
|
+
variant: "underline"
|
|
1566
|
+
}
|
|
1567
|
+
}
|
|
1568
|
+
);
|
|
1569
|
+
var TabsTrigger = React2.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
|
|
1570
|
+
return /* @__PURE__ */ jsx(
|
|
1571
|
+
TabsPrimitive.Trigger,
|
|
1572
|
+
{
|
|
1573
|
+
ref,
|
|
1574
|
+
className: cn(triggerVariants({ variant }), className),
|
|
1575
|
+
...props
|
|
1576
|
+
}
|
|
1577
|
+
);
|
|
1578
|
+
});
|
|
1579
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
1580
|
+
var TabsContent = React2.forwardRef(function TabsContent2({ className, ...props }, ref) {
|
|
1581
|
+
return /* @__PURE__ */ jsx(
|
|
1582
|
+
TabsPrimitive.Content,
|
|
1583
|
+
{
|
|
1584
|
+
ref,
|
|
1585
|
+
className: cn(
|
|
1586
|
+
"ds:mt-3 ds:focus-visible:outline-none",
|
|
1587
|
+
"ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
1588
|
+
className
|
|
1589
|
+
),
|
|
1590
|
+
...props
|
|
1591
|
+
}
|
|
1592
|
+
);
|
|
1593
|
+
});
|
|
1594
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
1595
|
+
var UNASSIGNED_VALUE = "__unassigned__";
|
|
1596
|
+
function TeamMemberSelect({
|
|
1597
|
+
teamMembers,
|
|
1598
|
+
currentUserId,
|
|
1599
|
+
value,
|
|
1600
|
+
onValueChange,
|
|
1601
|
+
includeUnassigned = true,
|
|
1602
|
+
placeholder = "Select team member...",
|
|
1603
|
+
className,
|
|
1604
|
+
size
|
|
1605
|
+
}) {
|
|
1606
|
+
const options = React2.useMemo(() => {
|
|
1607
|
+
const meBadge = /* @__PURE__ */ jsx(
|
|
1608
|
+
Badge,
|
|
1609
|
+
{
|
|
1610
|
+
variant: "secondary",
|
|
1611
|
+
size: "sm",
|
|
1612
|
+
className: "ds:px-1.5 ds:py-0 ds:font-mono ds:text-[10px] ds:tracking-wider ds:uppercase",
|
|
1613
|
+
children: "Me"
|
|
1614
|
+
}
|
|
1615
|
+
);
|
|
1616
|
+
const sorted = [...teamMembers].sort((a, b) => {
|
|
1617
|
+
if (currentUserId) {
|
|
1618
|
+
if (a.id === currentUserId) return -1;
|
|
1619
|
+
if (b.id === currentUserId) return 1;
|
|
1620
|
+
}
|
|
1621
|
+
return a.fullName.localeCompare(b.fullName);
|
|
1622
|
+
});
|
|
1623
|
+
const memberOptions = sorted.map((m) => ({
|
|
1624
|
+
value: m.id,
|
|
1625
|
+
label: m.fullName,
|
|
1626
|
+
labelSuffix: m.id === currentUserId ? meBadge : void 0
|
|
1627
|
+
}));
|
|
1628
|
+
if (includeUnassigned) {
|
|
1629
|
+
return [{ value: UNASSIGNED_VALUE, label: "Unassigned" }, ...memberOptions];
|
|
1630
|
+
}
|
|
1631
|
+
return memberOptions;
|
|
1632
|
+
}, [teamMembers, currentUserId, includeUnassigned]);
|
|
1633
|
+
const innerValue = value === "" ? UNASSIGNED_VALUE : value;
|
|
1634
|
+
const handleChange = (next) => {
|
|
1635
|
+
onValueChange(next === UNASSIGNED_VALUE ? "" : next);
|
|
1636
|
+
};
|
|
1637
|
+
return /* @__PURE__ */ jsx(
|
|
1638
|
+
Select,
|
|
1639
|
+
{
|
|
1640
|
+
options,
|
|
1641
|
+
value: innerValue,
|
|
1642
|
+
onValueChange: handleChange,
|
|
1643
|
+
placeholder,
|
|
1644
|
+
className,
|
|
1645
|
+
size
|
|
1646
|
+
}
|
|
1647
|
+
);
|
|
1648
|
+
}
|
|
1649
|
+
TeamMemberSelect.displayName = "TeamMemberSelect";
|
|
1556
1650
|
var TONE_DOT = {
|
|
1557
1651
|
brand: "ds:bg-brand",
|
|
1558
1652
|
info: "ds:bg-accent-2",
|
|
@@ -1580,7 +1674,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
|
|
|
1580
1674
|
"aria-selected": active,
|
|
1581
1675
|
onClick: () => onChange(tab.value),
|
|
1582
1676
|
className: cn(
|
|
1583
|
-
"ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:border ds:px-3 ds:py-1.5 ds:text-sm ds:font-medium ds:transition-colors ds:motion-reduce:transition-none",
|
|
1677
|
+
"ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:border ds:px-3 ds:py-1.5 ds:text-sm ds:font-medium ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
|
|
1584
1678
|
"ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
|
|
1585
1679
|
active ? "ds:border-brand ds:bg-brand/5 ds:text-brand" : "ds:border-transparent ds:text-fg-3 ds:hover:text-fg"
|
|
1586
1680
|
),
|
|
@@ -2520,7 +2614,7 @@ var DashGrid = forwardRef(function DashGrid2({ widgets, storageKey, onReorder, c
|
|
|
2520
2614
|
setDragId(null);
|
|
2521
2615
|
setOverId(null);
|
|
2522
2616
|
},
|
|
2523
|
-
className: "ds:absolute ds:top-3 ds:right-3 ds:z-[var(--z-base)] ds:flex ds:cursor-grab ds:touch-none ds:items-center ds:justify-center ds:rounded-[var(--radius-icon)] ds:p-1 ds:text-fg-4 ds:opacity-0 ds:transition-opacity ds:duration-[var(--duration-fast)] ds:hover:bg-surface-hover ds:hover:text-fg-2 ds:focus-visible:opacity-100 ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:active:cursor-grabbing ds:group-hover/dash:opacity-100 ds:motion-reduce:transition-none",
|
|
2617
|
+
className: "ds:absolute ds:top-3 ds:right-3 ds:z-[var(--z-base)] ds:flex ds:cursor-grab ds:touch-none ds:items-center ds:justify-center ds:rounded-[var(--radius-icon)] ds:p-1 ds:text-fg-4 ds:opacity-0 ds:transition-[opacity,background-color,color] ds:duration-[var(--duration-fast)] ds:ease-[var(--motion-ease-enter)] ds:hover:bg-surface-hover ds:hover:text-fg-2 ds:focus-visible:opacity-100 ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:active:cursor-grabbing ds:group-hover/dash:opacity-100 ds:motion-reduce:transition-none",
|
|
2524
2618
|
children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ds:grid ds:grid-cols-2 ds:gap-[3px]", children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx("span", { className: "ds:size-[3px] ds:rounded-full ds:bg-current" }, i)) })
|
|
2525
2619
|
}
|
|
2526
2620
|
),
|
|
@@ -2722,13 +2816,17 @@ var ClientRailItem = forwardRef(
|
|
|
2722
2816
|
// Layout
|
|
2723
2817
|
"ds:relative ds:flex ds:w-full ds:items-center ds:gap-[11px] ds:border-b ds:border-rule ds:px-[14px] ds:py-[11px] ds:text-left",
|
|
2724
2818
|
// Motion
|
|
2725
|
-
"ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
|
|
2819
|
+
"ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
|
|
2726
2820
|
// Cursor
|
|
2727
2821
|
"ds:cursor-pointer",
|
|
2822
|
+
// Focus — an inset outline: rows stack edge to edge in the rail, so an
|
|
2823
|
+
// outer ring would be clipped by the neighbours (same as TableRow).
|
|
2824
|
+
"ds:focus-visible:outline-2 ds:focus-visible:-outline-offset-2 ds:focus-visible:outline-[var(--focus-ring-border)]",
|
|
2728
2825
|
// State — hover only when not active to avoid override
|
|
2729
2826
|
active ? "ds:bg-brand-bg" : "ds:hover:bg-surface-2",
|
|
2730
2827
|
className
|
|
2731
2828
|
),
|
|
2829
|
+
"aria-current": active ? "true" : void 0,
|
|
2732
2830
|
...props,
|
|
2733
2831
|
children: [
|
|
2734
2832
|
active && /* @__PURE__ */ jsx(
|
|
@@ -2816,7 +2914,7 @@ function MetaText({
|
|
|
2816
2914
|
if (presentValues.length === 0) {
|
|
2817
2915
|
return null;
|
|
2818
2916
|
}
|
|
2819
|
-
return /* @__PURE__ */ jsx("div", { className, children: presentValues.map((value, index) => /* @__PURE__ */ jsxs(
|
|
2917
|
+
return /* @__PURE__ */ jsx("div", { className, children: presentValues.map((value, index) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
|
|
2820
2918
|
index > 0 && /* @__PURE__ */ jsx(
|
|
2821
2919
|
"span",
|
|
2822
2920
|
{
|
|
@@ -2856,7 +2954,7 @@ function CheckboxSlot({
|
|
|
2856
2954
|
{
|
|
2857
2955
|
className: cn(
|
|
2858
2956
|
"ds:shrink-0 ds:transition-opacity ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
|
|
2859
|
-
selected ? "ds:opacity-100" : "ds:opacity-0 ds:group-hover:opacity-100",
|
|
2957
|
+
selected ? "ds:opacity-100" : "ds:opacity-0 ds:group-hover:opacity-100 ds:focus-within:opacity-100",
|
|
2860
2958
|
className
|
|
2861
2959
|
),
|
|
2862
2960
|
onClick: (event) => event.stopPropagation(),
|
|
@@ -2884,7 +2982,14 @@ function MoreActions({ menu }) {
|
|
|
2884
2982
|
className: cn(
|
|
2885
2983
|
"ds:grid ds:size-[30px] ds:place-items-center ds:rounded-[8px] ds:text-fg-4",
|
|
2886
2984
|
"ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
|
|
2887
|
-
"ds:group-hover:text-fg-2 ds:hover:bg-surface ds:hover:text-brand ds:hover:shadow-flat"
|
|
2985
|
+
"ds:group-hover:text-fg-2 ds:hover:bg-surface ds:hover:text-brand ds:hover:shadow-flat",
|
|
2986
|
+
// `aria-expanded` twin of the `data-state` selector below: a
|
|
2987
|
+
// TooltipTrigger asChild ancestor can clobber this button's own
|
|
2988
|
+
// `data-state` with the tooltip's (see toggle-group.tsx's note
|
|
2989
|
+
// on the same bug), but never sets `aria-expanded`.
|
|
2990
|
+
"ds:data-[state=open]:bg-surface ds:data-[state=open]:text-brand ds:data-[state=open]:shadow-flat",
|
|
2991
|
+
"ds:aria-expanded:bg-surface ds:aria-expanded:text-brand ds:aria-expanded:shadow-flat",
|
|
2992
|
+
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
|
|
2888
2993
|
),
|
|
2889
2994
|
"aria-label": "More actions",
|
|
2890
2995
|
onClick: (event) => event.stopPropagation(),
|
|
@@ -2894,7 +2999,7 @@ function MoreActions({ menu }) {
|
|
|
2894
2999
|
/* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", onClick: (event) => event.stopPropagation(), children: menu })
|
|
2895
3000
|
] });
|
|
2896
3001
|
}
|
|
2897
|
-
var DocumentFileRow =
|
|
3002
|
+
var DocumentFileRow = React2.forwardRef(
|
|
2898
3003
|
function DocumentFileRow2({
|
|
2899
3004
|
name,
|
|
2900
3005
|
fileType,
|
|
@@ -2961,7 +3066,7 @@ var DocumentFileRow = React4.forwardRef(
|
|
|
2961
3066
|
}
|
|
2962
3067
|
);
|
|
2963
3068
|
DocumentFileRow.displayName = "DocumentFileRow";
|
|
2964
|
-
var DocumentFileCard =
|
|
3069
|
+
var DocumentFileCard = React2.forwardRef(
|
|
2965
3070
|
function DocumentFileCard2({
|
|
2966
3071
|
name,
|
|
2967
3072
|
fileType,
|
|
@@ -3037,7 +3142,7 @@ var lineCaptionToneClass = {
|
|
|
3037
3142
|
warning: "ds:text-warning-fg",
|
|
3038
3143
|
danger: "ds:text-danger-fg"
|
|
3039
3144
|
};
|
|
3040
|
-
var DocumentFileLine =
|
|
3145
|
+
var DocumentFileLine = React2.forwardRef(
|
|
3041
3146
|
function DocumentFileLine2({
|
|
3042
3147
|
name,
|
|
3043
3148
|
fileType = "",
|
|
@@ -3165,7 +3270,7 @@ function ChecklistItemRow({ item }) {
|
|
|
3165
3270
|
"div",
|
|
3166
3271
|
{
|
|
3167
3272
|
className: cn(
|
|
3168
|
-
"ds:rounded-xl ds:border ds:px-3.5 ds:py-2.5 ds:shadow-quiet ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
|
|
3273
|
+
"ds:rounded-xl ds:border ds:px-3.5 ds:py-2.5 ds:shadow-quiet ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
|
|
3169
3274
|
done ? "ds:border-success-line/70 ds:bg-success-bg/30" : item.status === "in-review" ? "ds:border-warning-line/70 ds:bg-warning-bg/25" : "ds:border-rule ds:bg-surface"
|
|
3170
3275
|
),
|
|
3171
3276
|
children: [
|
|
@@ -3211,7 +3316,7 @@ function FileGroup({ files }) {
|
|
|
3211
3316
|
file.id
|
|
3212
3317
|
)) });
|
|
3213
3318
|
}
|
|
3214
|
-
var DocumentChecklist =
|
|
3319
|
+
var DocumentChecklist = React2.forwardRef(
|
|
3215
3320
|
function DocumentChecklist2({
|
|
3216
3321
|
items,
|
|
3217
3322
|
title = "Your documents",
|
|
@@ -3317,7 +3422,7 @@ var DocumentRequestField = forwardRef(
|
|
|
3317
3422
|
className: cn(
|
|
3318
3423
|
"ds:ml-auto ds:size-[26px] ds:rounded-[7px] ds:grid ds:place-items-center",
|
|
3319
3424
|
"ds:text-fg-4",
|
|
3320
|
-
"ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
|
|
3425
|
+
"ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
|
|
3321
3426
|
"ds:hover:bg-danger-bg ds:hover:text-danger-fg",
|
|
3322
3427
|
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
|
|
3323
3428
|
),
|
|
@@ -3498,7 +3603,7 @@ var DataTableToolbar = forwardRef(
|
|
|
3498
3603
|
ref,
|
|
3499
3604
|
...slot(dataTableAnatomy, "toolbar"),
|
|
3500
3605
|
className: cn(
|
|
3501
|
-
"ds:flex ds:items-center ds:gap-2 ds:px-3 ds:py-2.5",
|
|
3606
|
+
"ds:flex ds:flex-wrap ds:items-center ds:gap-2 ds:px-3 ds:py-2.5",
|
|
3502
3607
|
"ds:border-rule ds:bg-surface ds:border-b",
|
|
3503
3608
|
className
|
|
3504
3609
|
),
|
|
@@ -4019,7 +4124,7 @@ function StagePill({
|
|
|
4019
4124
|
"span",
|
|
4020
4125
|
{
|
|
4021
4126
|
className: cn(
|
|
4022
|
-
"ds:inline-flex ds:items-center ds:gap-1.5 ds:rounded-pill ds:px-2 ds:py-0.5 ds:text-xs ds:font-medium",
|
|
4127
|
+
"ds:inline-flex ds:items-center ds:gap-1.5 ds:whitespace-nowrap ds:rounded-pill ds:px-2 ds:py-0.5 ds:text-xs ds:font-medium",
|
|
4023
4128
|
toneClass[tone]
|
|
4024
4129
|
),
|
|
4025
4130
|
children: [
|
|
@@ -4561,7 +4666,7 @@ function AssigneePicker({
|
|
|
4561
4666
|
{
|
|
4562
4667
|
type: "button",
|
|
4563
4668
|
"aria-label": "Edit assignees",
|
|
4564
|
-
className: "ds:rounded-pill ds:border-rule ds:hover:bg-overlay-hover ds:inline-flex ds:items-center ds:gap-2 ds:border ds:py-1 ds:pr-2.5 ds:pl-1.5 ds:transition-colors ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
|
|
4669
|
+
className: "ds:rounded-pill ds:border-rule ds:hover:bg-overlay-hover ds:active:bg-overlay-active ds:inline-flex ds:items-center ds:gap-2 ds:border ds:py-1 ds:pr-2.5 ds:pl-1.5 ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
|
|
4565
4670
|
children: [
|
|
4566
4671
|
stack,
|
|
4567
4672
|
/* @__PURE__ */ jsx("span", { className: "ds:text-fg-2 ds:text-sm ds:font-semibold ds:tabular-nums tabular-nums", children: selected.length }),
|
|
@@ -4876,7 +4981,7 @@ var TimeLoggerContextRow = forwardRef(
|
|
|
4876
4981
|
{
|
|
4877
4982
|
type: "button",
|
|
4878
4983
|
onClick: onClientSelect,
|
|
4879
|
-
className: "ds:rounded-btn ds:hover:bg-surface-2 ds:focus-visible:bg-surface-2 ds:-m-1 ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-2.5 ds:p-1 ds:text-left ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:motion-reduce:transition-none",
|
|
4984
|
+
className: "ds:rounded-btn ds:hover:bg-surface-2 ds:focus-visible:bg-surface-2 ds:active:bg-control-active-bg ds:-m-1 ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-2.5 ds:p-1 ds:text-left ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:motion-reduce:transition-none",
|
|
4880
4985
|
children: [
|
|
4881
4986
|
avatar,
|
|
4882
4987
|
text
|
|
@@ -5083,7 +5188,7 @@ var TimeLoggerBillable = forwardRef(
|
|
|
5083
5188
|
{
|
|
5084
5189
|
type: "button",
|
|
5085
5190
|
"aria-label": "Billing settings",
|
|
5086
|
-
className: "ds:text-fg-4 ds:hover:text-fg-2 ds:hover:bg-surface-hover ds:rounded-btn ds:flex ds:size-6 ds:items-center ds:justify-center ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:motion-reduce:transition-none ds:[&_svg]:size-4",
|
|
5191
|
+
className: "ds:text-fg-4 ds:hover:text-fg-2 ds:hover:bg-surface-hover ds:active:bg-control-active-bg ds:rounded-btn ds:flex ds:size-6 ds:items-center ds:justify-center ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:motion-reduce:transition-none ds:[&_svg]:size-4",
|
|
5087
5192
|
children: /* @__PURE__ */ jsx(SettingsIcon, {})
|
|
5088
5193
|
}
|
|
5089
5194
|
) }),
|
|
@@ -5450,10 +5555,10 @@ function EmailMessageCard({
|
|
|
5450
5555
|
type: "button",
|
|
5451
5556
|
onClick: () => setExpanded((v) => !v),
|
|
5452
5557
|
"aria-expanded": expanded,
|
|
5453
|
-
className: "ds:flex ds:w-full ds:items-center ds:justify-center ds:gap-1.5 ds:border-t ds:border-rule/60 ds:bg-surface ds:py-1.5 ds:text-xs ds:font-medium ds:text-brand ds:transition-colors ds:hover:bg-surface-hover/40 ds:motion-reduce:transition-none",
|
|
5558
|
+
className: "ds:flex ds:w-full ds:items-center ds:justify-center ds:gap-1.5 ds:border-t ds:border-rule/60 ds:bg-surface ds:py-1.5 ds:text-xs ds:font-medium ds:text-brand ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:hover:bg-surface-hover/40 ds:motion-reduce:transition-none",
|
|
5454
5559
|
children: [
|
|
5455
5560
|
expanded ? "Show less" : "Show full email",
|
|
5456
|
-
/* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("ds:transition-transform ds:motion-reduce:transition-none", expanded && "ds:rotate-180") })
|
|
5561
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none", expanded && "ds:rotate-180") })
|
|
5457
5562
|
]
|
|
5458
5563
|
}
|
|
5459
5564
|
),
|
|
@@ -5504,7 +5609,7 @@ function SignatureEditor({
|
|
|
5504
5609
|
}
|
|
5505
5610
|
)
|
|
5506
5611
|
] }),
|
|
5507
|
-
/* @__PURE__ */ jsx("div", { className: "ds:p-3", children: loading ? /* @__PURE__ */ jsx(
|
|
5612
|
+
/* @__PURE__ */ jsx("div", { className: "ds:p-3", children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "ds:h-32 ds:rounded-md" }) : children }),
|
|
5508
5613
|
(onSave || onInsert) && /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:justify-end ds:gap-2 ds:border-t ds:border-rule ds:px-3 ds:py-2", children: [
|
|
5509
5614
|
onSave && /* @__PURE__ */ jsx(
|
|
5510
5615
|
Button,
|
|
@@ -5524,6 +5629,6 @@ function SignatureEditor({
|
|
|
5524
5629
|
}
|
|
5525
5630
|
SignatureEditor.displayName = "SignatureEditor";
|
|
5526
5631
|
|
|
5527
|
-
export { AIReceiptPanel, AiDraftCard, Assignee, AttentionItem, Badge, Blockquote, BottomNav, CategoryDivider, CategoryTag, ChannelTabs, ClientRailGroupHeader, ClientRailItem, Dash, DashGrid, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DocumentChecklist, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, EmailMessageCard, EmptyValue, EngagementCard, EngagementTimeline, EngagementTimelineStep, IntentBadge, MissingDocumentsPanel, MoneyCell, NewMenu, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, Section, SectionHead, SectionHeader, SegmentedProgress, SignatureEditor, StagePill, Stat, StatusDot, StatusPill, SuggestionPills, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagsCell, TeamMemberSelect, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, formatClock, formatCurrency, formatDuration, nextSortDirection, parseDuration, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable, useFormReset, useStopwatch };
|
|
5528
|
-
//# sourceMappingURL=chunk-
|
|
5529
|
-
//# sourceMappingURL=chunk-
|
|
5632
|
+
export { AIReceiptPanel, AiDraftCard, Assignee, AttentionItem, Badge, Blockquote, BottomNav, CategoryDivider, CategoryTag, ChannelTabs, ClientRailGroupHeader, ClientRailItem, Dash, DashGrid, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DocumentChecklist, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, EmailMessageCard, EmptyValue, EngagementCard, EngagementTimeline, EngagementTimelineStep, IntentBadge, MissingDocumentsPanel, MoneyCell, NewMenu, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, Section, SectionHead, SectionHeader, SegmentedProgress, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, StagePill, Stat, StatusDot, StatusPill, SuggestionPills, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagsCell, TeamMemberSelect, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, formatClock, formatCurrency, formatDuration, nextSortDirection, parseDuration, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable, useFormReset, useStopwatch };
|
|
5633
|
+
//# sourceMappingURL=chunk-LUWPEBXZ.js.map
|
|
5634
|
+
//# sourceMappingURL=chunk-LUWPEBXZ.js.map
|