@dxos/react-ui 0.9.0 → 0.9.1-main.c7dcc2e112

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 (81) hide show
  1. package/dist/lib/browser/{chunk-7JFD5ZHZ.mjs → chunk-F3PLXTDA.mjs} +21 -25
  2. package/dist/lib/browser/{chunk-7JFD5ZHZ.mjs.map → chunk-F3PLXTDA.mjs.map} +3 -3
  3. package/dist/lib/browser/{chunk-5SPBSIWS.mjs → chunk-HFJYTGHU.mjs} +11 -1
  4. package/dist/lib/browser/chunk-HFJYTGHU.mjs.map +7 -0
  5. package/dist/lib/browser/index.mjs +1042 -856
  6. package/dist/lib/browser/index.mjs.map +4 -4
  7. package/dist/lib/browser/meta.json +1 -1
  8. package/dist/lib/browser/testing/index.mjs +5 -5
  9. package/dist/lib/browser/testing/index.mjs.map +2 -2
  10. package/dist/lib/browser/translations.mjs +1 -1
  11. package/dist/lib/node-esm/{chunk-TTEL2FP2.mjs → chunk-LLVUYLAM.mjs} +21 -25
  12. package/dist/lib/node-esm/{chunk-TTEL2FP2.mjs.map → chunk-LLVUYLAM.mjs.map} +3 -3
  13. package/dist/lib/node-esm/{chunk-FPVTVXND.mjs → chunk-OJYUPUCY.mjs} +11 -1
  14. package/dist/lib/node-esm/chunk-OJYUPUCY.mjs.map +7 -0
  15. package/dist/lib/node-esm/index.mjs +1042 -856
  16. package/dist/lib/node-esm/index.mjs.map +4 -4
  17. package/dist/lib/node-esm/meta.json +1 -1
  18. package/dist/lib/node-esm/testing/index.mjs +5 -5
  19. package/dist/lib/node-esm/testing/index.mjs.map +2 -2
  20. package/dist/lib/node-esm/translations.mjs +1 -1
  21. package/dist/types/src/components/Button/Button.d.ts +2 -0
  22. package/dist/types/src/components/Button/Button.d.ts.map +1 -1
  23. package/dist/types/src/components/Button/IconButton.d.ts +0 -1
  24. package/dist/types/src/components/Button/IconButton.d.ts.map +1 -1
  25. package/dist/types/src/components/Button/IconButton.stories.d.ts +34 -0
  26. package/dist/types/src/components/Button/IconButton.stories.d.ts.map +1 -1
  27. package/dist/types/src/components/Button/SystemIconButton.d.ts +20 -0
  28. package/dist/types/src/components/Button/SystemIconButton.d.ts.map +1 -0
  29. package/dist/types/src/components/Button/ToggleIconButton.d.ts +15 -0
  30. package/dist/types/src/components/Button/ToggleIconButton.d.ts.map +1 -0
  31. package/dist/types/src/components/Button/index.d.ts +2 -0
  32. package/dist/types/src/components/Button/index.d.ts.map +1 -1
  33. package/dist/types/src/components/Card/Card.d.ts +25 -19
  34. package/dist/types/src/components/Card/Card.d.ts.map +1 -1
  35. package/dist/types/src/components/Card/Card.stories.d.ts +1 -1
  36. package/dist/types/src/components/Card/Card.stories.d.ts.map +1 -1
  37. package/dist/types/src/components/Card/Card.theme.d.ts.map +1 -1
  38. package/dist/types/src/components/Clipboard/index.d.ts +1 -0
  39. package/dist/types/src/components/Clipboard/index.d.ts.map +1 -1
  40. package/dist/types/src/components/Column/Column.d.ts +19 -1
  41. package/dist/types/src/components/Column/Column.d.ts.map +1 -1
  42. package/dist/types/src/components/Column/Column.theme.d.ts +8 -0
  43. package/dist/types/src/components/Column/Column.theme.d.ts.map +1 -1
  44. package/dist/types/src/components/Input/constants.d.ts +3 -0
  45. package/dist/types/src/components/Input/constants.d.ts.map +1 -1
  46. package/dist/types/src/components/Message/Message.theme.d.ts.map +1 -1
  47. package/dist/types/src/components/Toast/Toast.d.ts.map +1 -1
  48. package/dist/types/src/components/Toast/Toast.theme.d.ts.map +1 -1
  49. package/dist/types/src/components/Tooltip/TextTooltip.d.ts +19 -0
  50. package/dist/types/src/components/Tooltip/TextTooltip.d.ts.map +1 -0
  51. package/dist/types/src/components/Tooltip/index.d.ts +1 -0
  52. package/dist/types/src/components/Tooltip/index.d.ts.map +1 -1
  53. package/dist/types/src/testing/Loading.d.ts.map +1 -1
  54. package/dist/types/src/translations.d.ts +10 -0
  55. package/dist/types/src/translations.d.ts.map +1 -1
  56. package/dist/types/tsconfig.tsbuildinfo +1 -1
  57. package/package.json +16 -16
  58. package/src/components/Button/Button.tsx +23 -2
  59. package/src/components/Button/IconButton.stories.tsx +81 -1
  60. package/src/components/Button/IconButton.tsx +2 -4
  61. package/src/components/Button/SystemIconButton.tsx +153 -0
  62. package/src/components/Button/ToggleIconButton.tsx +32 -0
  63. package/src/components/Button/index.ts +2 -0
  64. package/src/components/Card/Card.stories.tsx +69 -27
  65. package/src/components/Card/Card.theme.ts +27 -9
  66. package/src/components/Card/Card.tsx +165 -88
  67. package/src/components/Column/Column.theme.ts +32 -4
  68. package/src/components/Column/Column.tsx +36 -1
  69. package/src/components/Input/constants.ts +3 -0
  70. package/src/components/Message/Message.theme.ts +0 -10
  71. package/src/components/Message/Message.tsx +4 -4
  72. package/src/components/Popover/Popover.theme.ts +1 -1
  73. package/src/components/Toast/Toast.theme.ts +0 -6
  74. package/src/components/Toast/Toast.tsx +11 -10
  75. package/src/components/Tooltip/TextTooltip.tsx +54 -0
  76. package/src/components/Tooltip/index.ts +1 -0
  77. package/src/testing/Loading.tsx +2 -1
  78. package/src/testing/decorators/withLayout.tsx +2 -2
  79. package/src/translations.ts +10 -0
  80. package/dist/lib/browser/chunk-5SPBSIWS.mjs.map +0 -7
  81. package/dist/lib/node-esm/chunk-FPVTVXND.mjs.map +0 -7
@@ -925,19 +925,24 @@ var iconButtonTheme = {
925
925
 
926
926
  // src/components/Card/Card.theme.ts
927
927
  import { mx as mx7 } from "@dxos/ui-theme";
928
- var root5 = ({ border, fullWidth }, ...etc) => mx7("dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden", "bg-card-surface", border && "border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
929
- var header = (_, ...etc) => mx7("dx-card__header dx-density-md bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! shadow-none [contain:none]", ...etc);
928
+ var root5 = ({ border, fullWidth }, ...etc) => mx7("dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden", border && "border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
929
+ var header = (_, ...etc) => mx7("dx-card__header col-span-3 grid grid-cols-subgrid items-center", "[&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2", ...etc);
930
930
  var title = (_props, ...etc) => mx7("dx-card__title grow truncate", ...etc);
931
- var body = (_props, ...etc) => mx7("dx-card__body contents pb-1 last:pb-0", ...etc);
931
+ var body = (_props, ...etc) => mx7("dx-card__body contents", ...etc);
932
+ var block = (_props, ...etc) => mx7("dx-card__block", ...etc);
932
933
  var text = ({ variant = "default", truncate: _truncate }, ...etc) => mx7("dx-card__text items-center overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5 text-description", ...etc);
933
934
  var textSpan = ({ variant = "default", truncate }, ...etc) => mx7(variant === "description" && "text-sm text-description line-clamp-3", truncate && "truncate", ...etc);
934
- var poster = (_props, ...etc) => mx7("dx-card__poster col-span-3 max-h-[200px]", ...etc);
935
+ var poster = (_props, ...etc) => mx7("dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none", ...etc);
935
936
  var posterIcon = (_props, ...etc) => mx7("dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]", ...etc);
936
- var action = (_props, ...etc) => mx7("dx-card__acztion col-span-3 !grid grid-cols-subgrid p-0! w-full text-start overflow-hidden", ...etc);
937
+ var action = (_props, ...etc) => mx7("dx-card__action col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 p-0! gap-0! w-full text-start overflow-hidden", ...etc);
937
938
  var actionLabel = (_props, ...etc) => mx7("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
938
- var link = (_props, ...etc) => mx7("dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
939
- var linkLabel = (_props, ...etc) => mx7("dx-card__link-label min-w-0 flex-1 truncate", ...etc);
940
- var row = ({ fullWidth }, ...etc) => mx7("dx-card__row", fullWidth ? "col-span-full" : "col-span-3 grid grid-cols-subgrid", ...etc);
939
+ var link = (_props, ...etc) => mx7("dx-card__link col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
940
+ var linkLabel = (_props, ...etc) => mx7("dx-card__link-label min-w-0 flex-1 truncate text-sm!", ...etc);
941
+ var row = ({ fullWidth }, ...etc) => mx7("dx-card__row overflow-hidden", fullWidth ? "col-span-full" : (
942
+ // (e.g. `dx-avatar`), which the direct-child selector cannot target. It is inert for normal
943
+ // block children, whose inner nodes are not grid items of this row.
944
+ "col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2"
945
+ ), ...etc);
941
946
  var section = (_props, ...etc) => mx7("dx-card__section col-span-full grid grid-cols-subgrid", ...etc);
942
947
  var sectionTitle = (_props, ...etc) => mx7("dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase", ...etc);
943
948
  var cardTheme = {
@@ -945,6 +950,7 @@ var cardTheme = {
945
950
  header,
946
951
  title,
947
952
  body,
953
+ block,
948
954
  row,
949
955
  section,
950
956
  "section-title": sectionTitle,
@@ -964,8 +970,9 @@ var root6 = (_, ...etc) => {
964
970
  return mx8("dx-column-root grid", ...etc);
965
971
  };
966
972
  var row2 = (_, ...etc) => {
967
- return mx8("col-span-3 grid grid-cols-subgrid", ...etc);
973
+ return mx8("col-span-3 grid grid-cols-subgrid", "[&>*:not(.dx-gutter)]:col-start-2", ...etc);
968
974
  };
975
+ var block2 = ({ end, compact, square }, ...etc) => mx8("dx-gutter grid place-items-center [&>img]:max-w-[1.5rem]", end ? "col-start-3" : "col-start-1", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
969
976
  var bleed = (_, ...etc) => {
970
977
  return mx8("col-span-full grid grid-cols-subgrid min-h-0", ...etc);
971
978
  };
@@ -975,6 +982,7 @@ var center = (_, ...etc) => {
975
982
  var columnTheme = {
976
983
  root: root6,
977
984
  row: row2,
985
+ block: block2,
978
986
  bleed,
979
987
  center
980
988
  };
@@ -1019,10 +1027,10 @@ import { getSize as getSize2, mx as mx11 } from "@dxos/ui-theme";
1019
1027
  var root7 = ({ size }, etc) => {
1020
1028
  return mx11("shrink-0 text-[var(--icons-color,currentColor)]", size ? getSize2(size) : "[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]", etc);
1021
1029
  };
1022
- var block = ({ compact, square }, ...etc) => mx11("grid place-items-center [&>img]:max-w-[1.5rem]", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
1030
+ var block3 = ({ compact, square }, ...etc) => mx11("grid place-items-center [&>img]:max-w-[1.5rem]", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
1023
1031
  var iconTheme = {
1024
1032
  root: root7,
1025
- block
1033
+ block: block3
1026
1034
  };
1027
1035
 
1028
1036
  // src/components/Input/Input.theme.ts
@@ -1228,21 +1236,13 @@ var header3 = (_, etc) => {
1228
1236
  var title3 = (_, etc) => {
1229
1237
  return mx18("col-start-2 overflow-hidden truncate", etc);
1230
1238
  };
1231
- var icon = (_, etc) => {
1232
- return mx18("col-start-1 grid place-items-center", etc);
1233
- };
1234
- var close = (_, etc) => {
1235
- return mx18("col-start-3", etc);
1236
- };
1237
1239
  var content4 = (_, etc) => {
1238
1240
  return mx18("col-start-2 flex flex-col first:font-medium pb-1.5", etc);
1239
1241
  };
1240
1242
  var messageTheme = {
1241
1243
  root: root11,
1242
1244
  header: header3,
1243
- icon,
1244
1245
  title: title3,
1245
- close,
1246
1246
  content: content4
1247
1247
  };
1248
1248
 
@@ -1271,7 +1271,7 @@ var panelTheme = {
1271
1271
 
1272
1272
  // src/components/Popover/Popover.theme.ts
1273
1273
  import { mx as mx20, surfaceShadow as surfaceShadow3, surfaceZIndex as surfaceZIndex3 } from "@dxos/ui-theme";
1274
- var content6 = ({ elevation }, ...etc) => mx20("dx-popover-surface border border-separator rounded-sm", surfaceShadow3({
1274
+ var content6 = ({ elevation }, ...etc) => mx20("dx-popover-surface overflow-hidden border border-separator rounded-sm", surfaceShadow3({
1275
1275
  elevation: "positioned"
1276
1276
  }), surfaceZIndex3({
1277
1277
  elevation,
@@ -1425,9 +1425,7 @@ var root19 = (_props, ...etc) => mx28("dx-popover-surface rounded-md p-1", surfa
1425
1425
  }), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", "dx-focus-ring", ...etc);
1426
1426
  var grid = (_props, ...etc) => mx28("gap-y-1 pbe-1", ...etc);
1427
1427
  var header4 = (_props, ...etc) => mx28("items-center", ...etc);
1428
- var icon2 = (_props, ...etc) => mx28("col-start-1 grid place-items-center", ...etc);
1429
1428
  var title4 = (_props, ...etc) => mx28("col-start-2 truncate font-medium", ...etc);
1430
- var close2 = (_props, ...etc) => mx28("col-start-3", ...etc);
1431
1429
  var description4 = (_props, ...etc) => mx28("col-start-2 overflow-hidden text-description", ...etc);
1432
1430
  var actions = (_props, ...etc) => mx28("flex gap-2 mbs-1", ...etc);
1433
1431
  var toastTheme = {
@@ -1435,9 +1433,7 @@ var toastTheme = {
1435
1433
  root: root19,
1436
1434
  grid,
1437
1435
  header: header4,
1438
- icon: icon2,
1439
1436
  title: title4,
1440
- close: close2,
1441
1437
  description: description4,
1442
1438
  actions
1443
1439
  };
@@ -1609,4 +1605,4 @@ export {
1609
1605
  defaultTheme,
1610
1606
  defaultTx
1611
1607
  };
1612
- //# sourceMappingURL=chunk-7JFD5ZHZ.mjs.map
1608
+ //# sourceMappingURL=chunk-F3PLXTDA.mjs.map