@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.
Files changed (33) hide show
  1. package/dist/brand-scope-BOKu4iOc.d.ts +262 -0
  2. package/dist/{chunk-UAPQ7VTS.js → chunk-LUWPEBXZ.js} +283 -178
  3. package/dist/chunk-LUWPEBXZ.js.map +1 -0
  4. package/dist/{chunk-AF3QYJ24.js → chunk-TBDTXAFH.js} +6 -4
  5. package/dist/chunk-TBDTXAFH.js.map +1 -0
  6. package/dist/{chunk-JKNHNNNY.js → chunk-TYXT5C2B.js} +95 -11
  7. package/dist/chunk-TYXT5C2B.js.map +1 -0
  8. package/dist/{chunk-XN7OBLQR.js → chunk-XJKCKBHI.js} +20 -16
  9. package/dist/chunk-XJKCKBHI.js.map +1 -0
  10. package/dist/css/components.css +1 -1
  11. package/dist/css/tokens.css +4 -4
  12. package/dist/{data-table-view-ep8al7P9.d.ts → data-table-view-BWhKeUiw.d.ts} +186 -2
  13. package/dist/{design-system-provider-CfD2g2lY.d.ts → design-system-provider-Coe2S3Lh.d.ts} +1 -1
  14. package/dist/icons/index.d.ts +5 -1
  15. package/dist/icons/index.js +1 -1
  16. package/dist/index.d.ts +290 -455
  17. package/dist/index.js +636 -250
  18. package/dist/index.js.map +1 -1
  19. package/dist/legacy/index.d.ts +11 -4
  20. package/dist/legacy/index.js +3 -3
  21. package/dist/next/index.d.ts +2 -2
  22. package/dist/styles.css +1 -1
  23. package/dist/suite/index.d.ts +14 -3
  24. package/dist/suite/index.js +3 -3
  25. package/dist/{types-Coqw8iaS.d.ts → types-DlqmlVyZ.d.ts} +11 -1
  26. package/docs/components.md +11 -8
  27. package/docs/components.registry.json +89 -22
  28. package/package.json +1 -1
  29. package/dist/brand-scope-BOHId6BY.d.ts +0 -58
  30. package/dist/chunk-AF3QYJ24.js.map +0 -1
  31. package/dist/chunk-JKNHNNNY.js.map +0 -1
  32. package/dist/chunk-UAPQ7VTS.js.map +0 -1
  33. 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-XN7OBLQR.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-AF3QYJ24.js';
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 React4 from 'react';
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("span", { className: "ds:inline-flex ds:size-3.5 ds:shrink-0", "aria-hidden": "true", children: icon }),
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
- "ds:hover:bg-surface-hover ds:hover:text-fg",
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 = React4.forwardRef(
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 = React4.useRef(checkedProp ?? defaultChecked ?? false);
948
- const rootRef = React4.useRef(null);
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 Tabs = React4.forwardRef(
1277
- function Tabs2({ className, ...props }, ref) {
1278
- return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, className: cn(className), ...props });
1279
- }
1280
- );
1281
- Tabs.displayName = TabsPrimitive.Root.displayName;
1282
- var TabsList = React4.forwardRef(function TabsList2({ className, ...props }, ref) {
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
- "ds:data-[state=on]:bg-brand-bg ds:data-[state=on]:text-brand"
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
- "ds:data-[state=on]:bg-brand-bg ds:data-[state=on]:text-brand"
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 = React4.createContext({
1381
+ var ToggleGroupContext = React2.createContext({
1451
1382
  variant: "default",
1452
1383
  size: void 0
1453
1384
  });
1454
- var ToggleGroup = React4.forwardRef(function ToggleGroup2({
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 = React4.useRef(valueProp ?? defaultValue ?? emptyValue);
1497
- const rootRef = React4.useRef(null);
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 = React4.useMemo(() => ({ variant, size }), [variant, size]);
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("ds:inline-flex ds:items-center ds:gap-1", className),
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 = React4.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
1541
- const ctx = React4.useContext(ToggleGroupContext);
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(React4.Fragment, { children: [
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 = React4.forwardRef(
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 = React4.forwardRef(
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 = React4.forwardRef(
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 = React4.forwardRef(
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("div", { className: "ds:h-32 ds:animate-pulse ds:rounded-md ds:bg-bg-2 ds:motion-reduce:animate-none" }) : children }),
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-UAPQ7VTS.js.map
5529
- //# sourceMappingURL=chunk-UAPQ7VTS.js.map
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