@nexub/react 8.5.0 → 8.7.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 (16) hide show
  1. package/accessibility.json +1 -1
  2. package/dist/components/Card/Card.js +1 -1
  3. package/dist/components/Combobox/Combobox.js +1 -2
  4. package/dist/components/DataTable/DataTable.js +1 -1
  5. package/dist/components/FileUpload/FileUpload.js +1 -1
  6. package/dist/components/MediaCard/MediaCard.js +1 -1
  7. package/dist/components/Spinner/Spinner.js +1 -1
  8. package/dist/components/StreamingText/StreamingText.js +1 -1
  9. package/dist/components/Table/Table.js +2 -2
  10. package/dist/components/Textarea/Textarea.js +3 -3
  11. package/dist/components/Toast/Toast.js +1 -1
  12. package/dist/components/Toast/Toaster.js +1 -1
  13. package/dist/components/TreeView/TreeView.js +1 -1
  14. package/dist/styles.css +1 -1
  15. package/dist/vendor/vaul.js +1 -1494
  16. package/package.json +6 -6
package/accessibility.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "8.5.0",
2
+ "version": "8.7.0",
3
3
  "standard": "WCAG 2.2 Level AA",
4
4
  "method": {
5
5
  "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",
package/dist/components/Card/Card.js CHANGED
@@ -10,7 +10,7 @@ import { usePointerSheen } from "../../hooks/usePointerSheen.js";
10
10
  const cardVariants = cva(
11
11
  // In-flow content: tone + a soft alpha hairline, no shadow (shadows are for floating layers).
12
12
  // A CardLink inside stretches over the card; the card then carries its focus ring.
13
- "rounded-[var(--card-radius,var(--shape-container))] bg-[var(--card-bg,var(--color-surface-elevated))] border border-[color:var(--card-border,color-mix(in_srgb,var(--color-outline-variant)_60%,transparent))] text-[var(--card-fg,var(--color-on-surface))] has-[[data-card-link]]:relative has-[[data-card-link]:focus-visible]:outline has-[[data-card-link]:focus-visible]:outline-[3px] has-[[data-card-link]:focus-visible]:outline-offset-2 has-[[data-card-link]:focus-visible]:outline-[var(--color-primary)]",
13
+ "rounded-[var(--card-radius,var(--shape-container))] bg-[var(--card-bg,var(--color-surface-elevated))] border border-[color:var(--card-border,color-mix(in_srgb,var(--color-outline-variant)_60%,transparent))] text-[var(--card-fg,var(--color-on-surface))] has-[[data-card-link]]:relative has-[[data-card-link]:focus-visible]:outline has-[[data-card-link]:focus-visible]:outline-3 has-[[data-card-link]:focus-visible]:outline-offset-2 has-[[data-card-link]:focus-visible]:outline-[var(--color-primary)]",
14
14
  {
15
15
  variants: {
16
16
  variant: {
package/dist/components/Combobox/Combobox.js CHANGED
@@ -4,7 +4,6 @@ import * as React from "react";
4
4
  import { Command } from "cmdk";
5
5
  import { cn } from "../../utils/cn.js";
6
6
  import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
7
- import { Spinner } from "../Spinner/Spinner.js";
8
7
  function scrollWithinList(el) {
9
8
  if (!el) return;
10
9
  el.scrollIntoView = () => {
@@ -68,7 +67,7 @@ const List = React.forwardRef(
68
67
  loading && // Not Command.Loading: its role="progressbar" isn't allowed inside a listbox
69
68
  // (axe aria-required-children). The listbox's aria-busy carries the state.
70
69
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-2 text-body-sm text-[var(--color-on-surface-muted)]", children: [
71
- /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": "true" }),
70
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-[var(--color-on-surface-variant)] border-t-transparent" }),
72
71
  messages.loading
73
72
  ] }),
74
73
  children
package/dist/components/DataTable/DataTable.js CHANGED
@@ -35,7 +35,7 @@ const alignJustify = {
35
35
  };
36
36
  const pagerButton = cn(
37
37
  pressable,
38
- "border border-[var(--color-outline-variant)] bg-transparent px-4 py-2 min-h-[44px] text-label-lg text-[var(--color-on-surface)]",
38
+ "border border-[var(--color-outline-variant)] bg-transparent px-4 py-2 min-h-11 text-label-lg text-[var(--color-on-surface)]",
39
39
  disabledContainer
40
40
  );
41
41
  const TableRoot = Table.Root;
package/dist/components/FileUpload/FileUpload.js CHANGED
@@ -115,7 +115,7 @@ const Dropzone = React.forwardRef(
115
115
  className: cn(
116
116
  // Hover/press = the state layer.
117
117
  "nx-state-layer rounded-shape-container border-2 border-dashed text-center text-[var(--color-on-surface)] transition-colors",
118
- "has-[input:focus-visible]:outline has-[input:focus-visible]:outline-[3px] has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--color-primary)]",
118
+ "has-[input:focus-visible]:outline has-[input:focus-visible]:outline-3 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--color-primary)]",
119
119
  isDragging ? "border-[var(--color-primary)] bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]" : "border-[var(--color-outline)] hover:border-[var(--color-primary)]",
120
120
  className
121
121
  ),
package/dist/components/MediaCard/MediaCard.js CHANGED
@@ -20,7 +20,7 @@ const MediaCard = React.forwardRef(
20
20
  ref,
21
21
  className: cn(
22
22
  "group relative grid overflow-hidden rounded-shape-container border border-[color-mix(in_srgb,var(--color-outline-variant)_60%,transparent)] bg-[var(--color-surface-container-high)]",
23
- href && "shadow-elevation-1 transition-[box-shadow,transform] duration-effects-fast ease-effects-fast hover:shadow-elevation-2 hover:duration-spatial-default hover:ease-spatial-default motion-safe:hover:-translate-y-0.5 has-[a:focus-visible]:outline has-[a:focus-visible]:outline-[3px] has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-[var(--color-primary)]",
23
+ href && "shadow-elevation-1 transition-[box-shadow,transform] duration-effects-fast ease-effects-fast hover:shadow-elevation-2 hover:duration-spatial-default hover:ease-spatial-default motion-safe:hover:-translate-y-0.5 has-[a:focus-visible]:outline has-[a:focus-visible]:outline-3 has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-[var(--color-primary)]",
24
24
  className
25
25
  ),
26
26
  ...props,
package/dist/components/Spinner/Spinner.js CHANGED
@@ -17,7 +17,7 @@ const spinnerVariants = cva(
17
17
  xs: "h-3 w-3 border-[1.5px]",
18
18
  sm: "h-4 w-4 border-2",
19
19
  md: "h-6 w-6 border-2",
20
- lg: "h-8 w-8 border-[3px]",
20
+ lg: "h-8 w-8 border-3",
21
21
  xl: "h-10 w-10 border-4"
22
22
  },
23
23
  tone: {
package/dist/components/StreamingText/StreamingText.js CHANGED
@@ -36,7 +36,7 @@ const StreamingText = React.forwardRef(
36
36
  {
37
37
  "aria-hidden": "true",
38
38
  "data-caret": "",
39
- className: "nx-caret ms-0.5 inline-block h-[1em] w-[2px] align-text-bottom rounded-full bg-[var(--color-primary)] motion-reduce:animate-none"
39
+ className: "nx-caret ms-0.5 inline-block h-[1em] w-0-5 align-text-bottom rounded-full bg-[var(--color-primary)] motion-reduce:animate-none"
40
40
  }
41
41
  )
42
42
  ]
package/dist/components/Table/Table.js CHANGED
@@ -93,7 +93,7 @@ const Head = React.forwardRef(
93
93
  {
94
94
  ref,
95
95
  className: cn(
96
- "h-10 px-4 text-start align-middle font-medium text-[var(--color-on-surface-muted)] [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
96
+ "h-10 px-4 text-start align-middle font-medium text-[var(--color-on-surface-muted)] [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0-5",
97
97
  className
98
98
  ),
99
99
  ...props
@@ -107,7 +107,7 @@ const Cell = React.forwardRef(
107
107
  {
108
108
  ref,
109
109
  className: cn(
110
- "p-4 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
110
+ "p-4 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0-5",
111
111
  className
112
112
  ),
113
113
  ...props
package/dist/components/Textarea/Textarea.js CHANGED
@@ -15,9 +15,9 @@ const textareaVariants = cva(
15
15
  {
16
16
  variants: {
17
17
  size: {
18
- sm: "px-3 py-1.5 text-body-sm min-h-[64px]",
19
- md: "px-3.5 py-2 text-body-md min-h-[80px]",
20
- lg: "px-4 py-2.5 text-body-md min-h-[96px]"
18
+ sm: "px-3 py-1.5 text-body-sm min-h-16",
19
+ md: "px-3.5 py-2 text-body-md min-h-20",
20
+ lg: "px-4 py-2.5 text-body-md min-h-24"
21
21
  },
22
22
  invalid: {
23
23
  true: fieldInvalid
package/dist/components/Toast/Toast.js CHANGED
@@ -64,7 +64,7 @@ const Action = React.forwardRef(
64
64
  {
65
65
  ref,
66
66
  className: cn(
67
- "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
67
+ "nx-state-layer relative inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
68
68
  className
69
69
  ),
70
70
  ...props
package/dist/components/Toast/Toaster.js CHANGED
@@ -198,7 +198,7 @@ function Toaster({ expand = false, visibleToasts = 3, position = "top-end" }) {
198
198
  {
199
199
  altText: action.label,
200
200
  onClick: action.onClick,
201
- className: "nx-state-layer relative inline-flex min-h-[44px] min-w-[44px] shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
201
+ className: "nx-state-layer relative inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-shape-control px-3 text-label-lg text-[var(--color-inverse-primary)]",
202
202
  children: action.label
203
203
  }
204
204
  ),
package/dist/components/TreeView/TreeView.js CHANGED
@@ -220,7 +220,7 @@ function TreeView({
220
220
  {
221
221
  "aria-hidden": "true",
222
222
  className: cn(
223
- "inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border-2",
223
+ "inline-flex size-4 shrink-0 items-center justify-center rounded-shape-min border-2",
224
224
  isChecked || mixed ? "border-[var(--color-primary)] bg-[var(--color-primary)] text-[var(--color-on-primary)]" : "border-[var(--color-outline)]"
225
225
  ),
226
226
  children: isChecked ? /* @__PURE__ */ jsx(Check, { size: "xs" }) : mixed ? /* @__PURE__ */ jsx(Minus, { size: "xs" }) : null