@assure-one/design-system 1.42.0 → 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-B7w3-y9E.d.ts → brand-scope-BOKu4iOc.d.ts} +1 -1
- package/dist/{chunk-YMRSFVW7.js → chunk-LUWPEBXZ.js} +283 -180
- 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-H53VF62B.js → chunk-TYXT5C2B.js} +92 -10
- package/dist/chunk-TYXT5C2B.js.map +1 -0
- package/dist/{chunk-M2HMZ2RW.js → chunk-XJKCKBHI.js} +11 -11
- package/dist/chunk-XJKCKBHI.js.map +1 -0
- package/dist/css/components.css +1 -1
- package/dist/{data-table-view-BN3GgNdp.d.ts → data-table-view-BWhKeUiw.d.ts} +2 -2
- package/dist/{design-system-provider-CrBRFQjR.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 +232 -50
- package/dist/index.js +516 -227
- package/dist/index.js.map +1 -1
- package/dist/legacy/index.d.ts +3 -3
- 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 +3 -3
- package/dist/suite/index.js +3 -3
- package/dist/{types-aBQCboFH.d.ts → types-DlqmlVyZ.d.ts} +11 -1
- package/docs/components.md +6 -3
- package/docs/components.registry.json +84 -17
- package/package.json +1 -1
- package/dist/chunk-AF3QYJ24.js.map +0 -1
- package/dist/chunk-H53VF62B.js.map +0 -1
- package/dist/chunk-M2HMZ2RW.js.map +0 -1
- package/dist/chunk-YMRSFVW7.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,138 +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
|
-
size
|
|
1363
|
-
}) {
|
|
1364
|
-
const options = React4.useMemo(() => {
|
|
1365
|
-
const meBadge = /* @__PURE__ */ jsx(
|
|
1366
|
-
Badge,
|
|
1367
|
-
{
|
|
1368
|
-
variant: "secondary",
|
|
1369
|
-
size: "sm",
|
|
1370
|
-
className: "ds:px-1.5 ds:py-0 ds:font-mono ds:text-[10px] ds:tracking-wider ds:uppercase",
|
|
1371
|
-
children: "Me"
|
|
1372
|
-
}
|
|
1373
|
-
);
|
|
1374
|
-
const sorted = [...teamMembers].sort((a, b) => {
|
|
1375
|
-
if (currentUserId) {
|
|
1376
|
-
if (a.id === currentUserId) return -1;
|
|
1377
|
-
if (b.id === currentUserId) return 1;
|
|
1378
|
-
}
|
|
1379
|
-
return a.fullName.localeCompare(b.fullName);
|
|
1380
|
-
});
|
|
1381
|
-
const memberOptions = sorted.map((m) => ({
|
|
1382
|
-
value: m.id,
|
|
1383
|
-
label: m.fullName,
|
|
1384
|
-
labelSuffix: m.id === currentUserId ? meBadge : void 0
|
|
1385
|
-
}));
|
|
1386
|
-
if (includeUnassigned) {
|
|
1387
|
-
return [{ value: UNASSIGNED_VALUE, label: "Unassigned" }, ...memberOptions];
|
|
1388
|
-
}
|
|
1389
|
-
return memberOptions;
|
|
1390
|
-
}, [teamMembers, currentUserId, includeUnassigned]);
|
|
1391
|
-
const innerValue = value === "" ? UNASSIGNED_VALUE : value;
|
|
1392
|
-
const handleChange = (next) => {
|
|
1393
|
-
onValueChange(next === UNASSIGNED_VALUE ? "" : next);
|
|
1394
|
-
};
|
|
1395
|
-
return /* @__PURE__ */ jsx(
|
|
1396
|
-
Select,
|
|
1397
|
-
{
|
|
1398
|
-
options,
|
|
1399
|
-
value: innerValue,
|
|
1400
|
-
onValueChange: handleChange,
|
|
1401
|
-
placeholder,
|
|
1402
|
-
className,
|
|
1403
|
-
size
|
|
1404
|
-
}
|
|
1405
|
-
);
|
|
1406
|
-
}
|
|
1407
|
-
TeamMemberSelect.displayName = "TeamMemberSelect";
|
|
1408
1335
|
var itemVariants = cva(
|
|
1409
1336
|
cn(
|
|
1410
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",
|
|
@@ -1413,13 +1340,14 @@ var itemVariants = cva(
|
|
|
1413
1340
|
"ds:hover:bg-surface-hover ds:hover:text-fg",
|
|
1414
1341
|
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
1415
1342
|
"ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
|
|
1416
|
-
|
|
1343
|
+
SELECTED_STATE_CLASSES
|
|
1417
1344
|
),
|
|
1418
1345
|
{
|
|
1419
1346
|
variants: {
|
|
1420
1347
|
variant: {
|
|
1421
1348
|
default: "",
|
|
1422
|
-
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
|
|
1423
1351
|
}
|
|
1424
1352
|
},
|
|
1425
1353
|
defaultVariants: {
|
|
@@ -1435,13 +1363,14 @@ var sizedItemVariants = cva(
|
|
|
1435
1363
|
"ds:hover:bg-surface-hover ds:hover:text-fg",
|
|
1436
1364
|
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
|
|
1437
1365
|
"ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
|
|
1438
|
-
|
|
1366
|
+
SELECTED_STATE_CLASSES
|
|
1439
1367
|
),
|
|
1440
1368
|
{
|
|
1441
1369
|
variants: {
|
|
1442
1370
|
variant: {
|
|
1443
1371
|
default: "",
|
|
1444
|
-
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
|
|
1445
1374
|
}
|
|
1446
1375
|
},
|
|
1447
1376
|
defaultVariants: {
|
|
@@ -1449,11 +1378,11 @@ var sizedItemVariants = cva(
|
|
|
1449
1378
|
}
|
|
1450
1379
|
}
|
|
1451
1380
|
);
|
|
1452
|
-
var ToggleGroupContext =
|
|
1381
|
+
var ToggleGroupContext = React2.createContext({
|
|
1453
1382
|
variant: "default",
|
|
1454
1383
|
size: void 0
|
|
1455
1384
|
});
|
|
1456
|
-
var ToggleGroup =
|
|
1385
|
+
var ToggleGroup = React2.forwardRef(function ToggleGroup2({
|
|
1457
1386
|
className,
|
|
1458
1387
|
variant,
|
|
1459
1388
|
size,
|
|
@@ -1495,11 +1424,11 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
|
|
|
1495
1424
|
defaultProp: defaultValue ?? emptyValue,
|
|
1496
1425
|
onChange: onValueChange
|
|
1497
1426
|
});
|
|
1498
|
-
const initialValue =
|
|
1499
|
-
const rootRef =
|
|
1427
|
+
const initialValue = React2.useRef(valueProp ?? defaultValue ?? emptyValue);
|
|
1428
|
+
const rootRef = React2.useRef(null);
|
|
1500
1429
|
const mergedRef = useMergedRefs(ref, rootRef);
|
|
1501
1430
|
const labelledBy = wiring["aria-labelledby"] ?? (fieldset?.legendMounted ? fieldset.legendId : void 0);
|
|
1502
|
-
const context =
|
|
1431
|
+
const context = React2.useMemo(() => ({ variant, size }), [variant, size]);
|
|
1503
1432
|
const radixProps = {
|
|
1504
1433
|
...props,
|
|
1505
1434
|
type,
|
|
@@ -1518,7 +1447,14 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
|
|
|
1518
1447
|
"aria-invalid": ariaInvalid ?? wiring["aria-invalid"],
|
|
1519
1448
|
"data-invalid": wiring["data-invalid"],
|
|
1520
1449
|
...size ? stateAttributes({ size }) : void 0,
|
|
1521
|
-
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
|
+
),
|
|
1522
1458
|
...radixProps,
|
|
1523
1459
|
children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children })
|
|
1524
1460
|
}
|
|
@@ -1539,8 +1475,8 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
|
|
|
1539
1475
|
] });
|
|
1540
1476
|
});
|
|
1541
1477
|
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
1542
|
-
var ToggleGroupItem =
|
|
1543
|
-
const ctx =
|
|
1478
|
+
var ToggleGroupItem = React2.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
|
|
1479
|
+
const ctx = React2.useContext(ToggleGroupContext);
|
|
1544
1480
|
const resolvedVariant = variant ?? ctx.variant;
|
|
1545
1481
|
return /* @__PURE__ */ jsx(
|
|
1546
1482
|
ToggleGroupPrimitive.Item,
|
|
@@ -1555,6 +1491,162 @@ var ToggleGroupItem = React4.forwardRef(function ToggleGroupItem2({ className, v
|
|
|
1555
1491
|
);
|
|
1556
1492
|
});
|
|
1557
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";
|
|
1558
1650
|
var TONE_DOT = {
|
|
1559
1651
|
brand: "ds:bg-brand",
|
|
1560
1652
|
info: "ds:bg-accent-2",
|
|
@@ -1582,7 +1674,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
|
|
|
1582
1674
|
"aria-selected": active,
|
|
1583
1675
|
onClick: () => onChange(tab.value),
|
|
1584
1676
|
className: cn(
|
|
1585
|
-
"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",
|
|
1586
1678
|
"ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
|
|
1587
1679
|
active ? "ds:border-brand ds:bg-brand/5 ds:text-brand" : "ds:border-transparent ds:text-fg-3 ds:hover:text-fg"
|
|
1588
1680
|
),
|
|
@@ -2522,7 +2614,7 @@ var DashGrid = forwardRef(function DashGrid2({ widgets, storageKey, onReorder, c
|
|
|
2522
2614
|
setDragId(null);
|
|
2523
2615
|
setOverId(null);
|
|
2524
2616
|
},
|
|
2525
|
-
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",
|
|
2526
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)) })
|
|
2527
2619
|
}
|
|
2528
2620
|
),
|
|
@@ -2724,13 +2816,17 @@ var ClientRailItem = forwardRef(
|
|
|
2724
2816
|
// Layout
|
|
2725
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",
|
|
2726
2818
|
// Motion
|
|
2727
|
-
"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",
|
|
2728
2820
|
// Cursor
|
|
2729
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)]",
|
|
2730
2825
|
// State — hover only when not active to avoid override
|
|
2731
2826
|
active ? "ds:bg-brand-bg" : "ds:hover:bg-surface-2",
|
|
2732
2827
|
className
|
|
2733
2828
|
),
|
|
2829
|
+
"aria-current": active ? "true" : void 0,
|
|
2734
2830
|
...props,
|
|
2735
2831
|
children: [
|
|
2736
2832
|
active && /* @__PURE__ */ jsx(
|
|
@@ -2818,7 +2914,7 @@ function MetaText({
|
|
|
2818
2914
|
if (presentValues.length === 0) {
|
|
2819
2915
|
return null;
|
|
2820
2916
|
}
|
|
2821
|
-
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: [
|
|
2822
2918
|
index > 0 && /* @__PURE__ */ jsx(
|
|
2823
2919
|
"span",
|
|
2824
2920
|
{
|
|
@@ -2858,7 +2954,7 @@ function CheckboxSlot({
|
|
|
2858
2954
|
{
|
|
2859
2955
|
className: cn(
|
|
2860
2956
|
"ds:shrink-0 ds:transition-opacity ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
|
|
2861
|
-
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",
|
|
2862
2958
|
className
|
|
2863
2959
|
),
|
|
2864
2960
|
onClick: (event) => event.stopPropagation(),
|
|
@@ -2886,7 +2982,14 @@ function MoreActions({ menu }) {
|
|
|
2886
2982
|
className: cn(
|
|
2887
2983
|
"ds:grid ds:size-[30px] ds:place-items-center ds:rounded-[8px] ds:text-fg-4",
|
|
2888
2984
|
"ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
|
|
2889
|
-
"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)]"
|
|
2890
2993
|
),
|
|
2891
2994
|
"aria-label": "More actions",
|
|
2892
2995
|
onClick: (event) => event.stopPropagation(),
|
|
@@ -2896,7 +2999,7 @@ function MoreActions({ menu }) {
|
|
|
2896
2999
|
/* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", onClick: (event) => event.stopPropagation(), children: menu })
|
|
2897
3000
|
] });
|
|
2898
3001
|
}
|
|
2899
|
-
var DocumentFileRow =
|
|
3002
|
+
var DocumentFileRow = React2.forwardRef(
|
|
2900
3003
|
function DocumentFileRow2({
|
|
2901
3004
|
name,
|
|
2902
3005
|
fileType,
|
|
@@ -2963,7 +3066,7 @@ var DocumentFileRow = React4.forwardRef(
|
|
|
2963
3066
|
}
|
|
2964
3067
|
);
|
|
2965
3068
|
DocumentFileRow.displayName = "DocumentFileRow";
|
|
2966
|
-
var DocumentFileCard =
|
|
3069
|
+
var DocumentFileCard = React2.forwardRef(
|
|
2967
3070
|
function DocumentFileCard2({
|
|
2968
3071
|
name,
|
|
2969
3072
|
fileType,
|
|
@@ -3039,7 +3142,7 @@ var lineCaptionToneClass = {
|
|
|
3039
3142
|
warning: "ds:text-warning-fg",
|
|
3040
3143
|
danger: "ds:text-danger-fg"
|
|
3041
3144
|
};
|
|
3042
|
-
var DocumentFileLine =
|
|
3145
|
+
var DocumentFileLine = React2.forwardRef(
|
|
3043
3146
|
function DocumentFileLine2({
|
|
3044
3147
|
name,
|
|
3045
3148
|
fileType = "",
|
|
@@ -3167,7 +3270,7 @@ function ChecklistItemRow({ item }) {
|
|
|
3167
3270
|
"div",
|
|
3168
3271
|
{
|
|
3169
3272
|
className: cn(
|
|
3170
|
-
"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",
|
|
3171
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"
|
|
3172
3275
|
),
|
|
3173
3276
|
children: [
|
|
@@ -3213,7 +3316,7 @@ function FileGroup({ files }) {
|
|
|
3213
3316
|
file.id
|
|
3214
3317
|
)) });
|
|
3215
3318
|
}
|
|
3216
|
-
var DocumentChecklist =
|
|
3319
|
+
var DocumentChecklist = React2.forwardRef(
|
|
3217
3320
|
function DocumentChecklist2({
|
|
3218
3321
|
items,
|
|
3219
3322
|
title = "Your documents",
|
|
@@ -3319,7 +3422,7 @@ var DocumentRequestField = forwardRef(
|
|
|
3319
3422
|
className: cn(
|
|
3320
3423
|
"ds:ml-auto ds:size-[26px] ds:rounded-[7px] ds:grid ds:place-items-center",
|
|
3321
3424
|
"ds:text-fg-4",
|
|
3322
|
-
"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",
|
|
3323
3426
|
"ds:hover:bg-danger-bg ds:hover:text-danger-fg",
|
|
3324
3427
|
"ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
|
|
3325
3428
|
),
|
|
@@ -3500,7 +3603,7 @@ var DataTableToolbar = forwardRef(
|
|
|
3500
3603
|
ref,
|
|
3501
3604
|
...slot(dataTableAnatomy, "toolbar"),
|
|
3502
3605
|
className: cn(
|
|
3503
|
-
"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",
|
|
3504
3607
|
"ds:border-rule ds:bg-surface ds:border-b",
|
|
3505
3608
|
className
|
|
3506
3609
|
),
|
|
@@ -4021,7 +4124,7 @@ function StagePill({
|
|
|
4021
4124
|
"span",
|
|
4022
4125
|
{
|
|
4023
4126
|
className: cn(
|
|
4024
|
-
"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",
|
|
4025
4128
|
toneClass[tone]
|
|
4026
4129
|
),
|
|
4027
4130
|
children: [
|
|
@@ -4563,7 +4666,7 @@ function AssigneePicker({
|
|
|
4563
4666
|
{
|
|
4564
4667
|
type: "button",
|
|
4565
4668
|
"aria-label": "Edit assignees",
|
|
4566
|
-
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",
|
|
4567
4670
|
children: [
|
|
4568
4671
|
stack,
|
|
4569
4672
|
/* @__PURE__ */ jsx("span", { className: "ds:text-fg-2 ds:text-sm ds:font-semibold ds:tabular-nums tabular-nums", children: selected.length }),
|
|
@@ -4878,7 +4981,7 @@ var TimeLoggerContextRow = forwardRef(
|
|
|
4878
4981
|
{
|
|
4879
4982
|
type: "button",
|
|
4880
4983
|
onClick: onClientSelect,
|
|
4881
|
-
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",
|
|
4882
4985
|
children: [
|
|
4883
4986
|
avatar,
|
|
4884
4987
|
text
|
|
@@ -5085,7 +5188,7 @@ var TimeLoggerBillable = forwardRef(
|
|
|
5085
5188
|
{
|
|
5086
5189
|
type: "button",
|
|
5087
5190
|
"aria-label": "Billing settings",
|
|
5088
|
-
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",
|
|
5089
5192
|
children: /* @__PURE__ */ jsx(SettingsIcon, {})
|
|
5090
5193
|
}
|
|
5091
5194
|
) }),
|
|
@@ -5452,10 +5555,10 @@ function EmailMessageCard({
|
|
|
5452
5555
|
type: "button",
|
|
5453
5556
|
onClick: () => setExpanded((v) => !v),
|
|
5454
5557
|
"aria-expanded": expanded,
|
|
5455
|
-
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",
|
|
5456
5559
|
children: [
|
|
5457
5560
|
expanded ? "Show less" : "Show full email",
|
|
5458
|
-
/* @__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") })
|
|
5459
5562
|
]
|
|
5460
5563
|
}
|
|
5461
5564
|
),
|
|
@@ -5506,7 +5609,7 @@ function SignatureEditor({
|
|
|
5506
5609
|
}
|
|
5507
5610
|
)
|
|
5508
5611
|
] }),
|
|
5509
|
-
/* @__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 }),
|
|
5510
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: [
|
|
5511
5614
|
onSave && /* @__PURE__ */ jsx(
|
|
5512
5615
|
Button,
|
|
@@ -5526,6 +5629,6 @@ function SignatureEditor({
|
|
|
5526
5629
|
}
|
|
5527
5630
|
SignatureEditor.displayName = "SignatureEditor";
|
|
5528
5631
|
|
|
5529
|
-
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 };
|
|
5530
|
-
//# sourceMappingURL=chunk-
|
|
5531
|
-
//# 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
|