@itwin/itwinui-react 5.0.0-alpha.13 → 5.0.0-alpha.14

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 (106) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +31 -0
  3. package/dist/DEV/bricks/Anchor.js +2 -2
  4. package/dist/DEV/bricks/Avatar.js +1 -1
  5. package/dist/DEV/bricks/Badge.js +1 -1
  6. package/dist/DEV/bricks/Button.js +2 -2
  7. package/dist/DEV/bricks/Checkbox.js +2 -4
  8. package/dist/DEV/bricks/Chip.js +3 -3
  9. package/dist/DEV/bricks/Description.js +1 -1
  10. package/dist/DEV/bricks/Divider.js +1 -1
  11. package/dist/DEV/bricks/DropdownMenu.js +12 -14
  12. package/dist/DEV/bricks/ErrorRegion.js +12 -43
  13. package/dist/DEV/bricks/Field.internal.js +2 -5
  14. package/dist/DEV/bricks/Field.js +8 -11
  15. package/dist/DEV/bricks/Icon.js +3 -7
  16. package/dist/DEV/bricks/IconButton.internal.js +23 -0
  17. package/dist/DEV/bricks/IconButton.js +24 -16
  18. package/dist/DEV/bricks/Kbd.js +3 -3
  19. package/dist/DEV/bricks/Label.js +1 -1
  20. package/dist/DEV/bricks/Radio.js +2 -4
  21. package/dist/DEV/bricks/Root.js +11 -11
  22. package/dist/DEV/bricks/Select.js +4 -7
  23. package/dist/DEV/bricks/Switch.js +2 -4
  24. package/dist/DEV/bricks/Table.js +2 -2
  25. package/dist/DEV/bricks/Tabs.js +1 -1
  26. package/dist/DEV/bricks/TextBox.js +6 -8
  27. package/dist/DEV/bricks/Toolbar.js +5 -3
  28. package/dist/DEV/bricks/Tooltip.js +4 -4
  29. package/dist/DEV/bricks/Tree.js +3 -3
  30. package/dist/DEV/bricks/TreeItem.js +234 -139
  31. package/dist/DEV/bricks/VisuallyHidden.js +10 -2
  32. package/dist/DEV/bricks/styles.css.js +1 -1
  33. package/dist/DEV/bricks/~hooks.js +1 -1
  34. package/dist/DEV/bricks/~utils.Dot.js +2 -2
  35. package/dist/DEV/bricks/~utils.ListItem.js +2 -2
  36. package/dist/DEV/foundations/styles.css.js +1 -1
  37. package/dist/bricks/Anchor.d.ts +1 -1
  38. package/dist/bricks/Anchor.js +2 -2
  39. package/dist/bricks/Avatar.d.ts +1 -1
  40. package/dist/bricks/Avatar.js +1 -1
  41. package/dist/bricks/Badge.d.ts +1 -1
  42. package/dist/bricks/Badge.js +1 -1
  43. package/dist/bricks/Button.d.ts +1 -1
  44. package/dist/bricks/Button.js +2 -2
  45. package/dist/bricks/Checkbox.d.ts +2 -2
  46. package/dist/bricks/Checkbox.js +2 -4
  47. package/dist/bricks/Chip.d.ts +1 -1
  48. package/dist/bricks/Chip.js +3 -3
  49. package/dist/bricks/Description.d.ts +1 -1
  50. package/dist/bricks/Description.js +1 -1
  51. package/dist/bricks/Divider.d.ts +2 -2
  52. package/dist/bricks/Divider.js +1 -1
  53. package/dist/bricks/DropdownMenu.d.ts +3 -3
  54. package/dist/bricks/DropdownMenu.js +12 -14
  55. package/dist/bricks/ErrorRegion.d.ts +1 -6
  56. package/dist/bricks/ErrorRegion.js +12 -43
  57. package/dist/bricks/Field.d.ts +2 -2
  58. package/dist/bricks/Field.internal.d.ts +2 -1
  59. package/dist/bricks/Field.internal.js +2 -5
  60. package/dist/bricks/Field.js +8 -11
  61. package/dist/bricks/Icon.d.ts +1 -1
  62. package/dist/bricks/Icon.js +3 -7
  63. package/dist/bricks/IconButton.internal.d.ts +10 -0
  64. package/dist/bricks/IconButton.internal.js +22 -0
  65. package/dist/bricks/IconButton.js +24 -16
  66. package/dist/bricks/Kbd.d.ts +2 -2
  67. package/dist/bricks/Kbd.js +3 -3
  68. package/dist/bricks/Label.d.ts +1 -1
  69. package/dist/bricks/Label.js +1 -1
  70. package/dist/bricks/ProgressBar.d.ts +1 -1
  71. package/dist/bricks/Radio.d.ts +2 -2
  72. package/dist/bricks/Radio.js +2 -4
  73. package/dist/bricks/Root.d.ts +1 -1
  74. package/dist/bricks/Root.js +11 -11
  75. package/dist/bricks/Select.d.ts +1 -1
  76. package/dist/bricks/Select.js +4 -7
  77. package/dist/bricks/Skeleton.d.ts +1 -1
  78. package/dist/bricks/Spinner.d.ts +1 -1
  79. package/dist/bricks/Switch.d.ts +2 -2
  80. package/dist/bricks/Switch.js +2 -4
  81. package/dist/bricks/Table.d.ts +1 -1
  82. package/dist/bricks/Table.js +2 -2
  83. package/dist/bricks/Tabs.d.ts +1 -1
  84. package/dist/bricks/Tabs.js +1 -1
  85. package/dist/bricks/Text.d.ts +1 -1
  86. package/dist/bricks/TextBox.d.ts +1 -1
  87. package/dist/bricks/TextBox.js +6 -8
  88. package/dist/bricks/Toolbar.d.ts +4 -3
  89. package/dist/bricks/Toolbar.js +5 -3
  90. package/dist/bricks/Tooltip.d.ts +2 -2
  91. package/dist/bricks/Tooltip.js +4 -4
  92. package/dist/bricks/Tree.d.ts +2 -2
  93. package/dist/bricks/Tree.js +3 -3
  94. package/dist/bricks/TreeItem.d.ts +5 -5
  95. package/dist/bricks/TreeItem.js +223 -138
  96. package/dist/bricks/VisuallyHidden.d.ts +1 -1
  97. package/dist/bricks/VisuallyHidden.js +10 -2
  98. package/dist/bricks/styles.css.js +1 -1
  99. package/dist/bricks/~hooks.js +1 -1
  100. package/dist/bricks/~utils.Dot.d.ts +1 -1
  101. package/dist/bricks/~utils.Dot.js +2 -2
  102. package/dist/bricks/~utils.ListItem.d.ts +1 -1
  103. package/dist/bricks/~utils.ListItem.js +2 -2
  104. package/dist/bricks/~utils.d.ts +1 -1
  105. package/dist/foundations/styles.css.js +1 -1
  106. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 5.0.0-alpha.14
4
+
5
+ - Improved the performance of `<Tree.Item>`.
6
+ - Removed dismiss button from `<ErrorRegion.Item>`.
7
+ - **breaking**: Added and renamed some CSS variables. See [#571](https://github.com/iTwin/design-system/pull/571).
8
+ - Styling changes:
9
+ - Enabled some disambiguation character variants for `InterVariable` font.
10
+ - Improved forced-colors mode styling for `Tabs`.
11
+ - Updated some color values in light mode to match the latest design.
12
+ - Bug fixes:
13
+ - Fixed an `undefined` check for `document.fonts`.
14
+ - Fixed a Safari issue where `<Switch>` was not using the correct height.
15
+ - Fixed a responsive design issue in `Tabs` where the active stripe was not reacting to viewport resize.
16
+
3
17
  ## 5.0.0-alpha.13
4
18
 
5
19
  - Added new `unstable_ErrorRegion` component for displaying errors originating from `Tree`. See [#454](https://github.com/iTwin/design-system/pull/454).
package/README.md CHANGED
@@ -33,6 +33,37 @@ Once that’s in place, you can import and use components from `@itwin/itwinui-r
33
33
  > [!NOTE]
34
34
  > If you are trying to use this package alongside the current stable version of iTwinUI, you will need to set up the [iTwinUI theme bridge](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge).
35
35
 
36
+ ### Fonts
37
+
38
+ iTwinUI uses [InterVariable](https://rsms.me/inter/) as its interface font. In the future, other fonts may also be added for different purposes. We recommend self-hosting all fonts for robustness, security and performance reasons.
39
+
40
+ To self-host `InterVariable`, download the [`InterVariable.woff2`](https://rsms.me/inter/font-files/InterVariable.woff2) and [`InterVariable-Italic.woff2`](https://rsms.me/inter/font-files/InterVariable-Italic.woff2) font files from the official website, and serve them alongside your other assets. Then include the following CSS in the `<head>` of your document, replacing the placeholder paths with the correct path to where the fonts are located:
41
+
42
+ ```html
43
+ <style>
44
+ @font-face {
45
+ font-family: InterVariable;
46
+ font-style: normal;
47
+ font-weight 100 900;
48
+ font-display: swap;
49
+ src: url("/path/to/InterVariable.woff2") format("woff2");
50
+ }
51
+
52
+ @font-face {
53
+ font-family: InterVariable;
54
+ font-style: italic;
55
+ font-weight 100 900;
56
+ font-display: swap;
57
+ src: url("/path/to/InterVariable-Italic.woff2") format("woff2");
58
+ }
59
+ </style>
60
+ ```
61
+
62
+ Build tools such as [Vite](https://vite.dev/guide/assets.html#importing-asset-as-url) can handle `url()` references and automatically copy these files into your output directory with hashed file names. These files can then be safely served with [HTTP caching](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/#how_to_cache_static_resources_using_http_caching) without blocking upgrades to newer versions of the fonts.
63
+
64
+ > [!NOTE]
65
+ > If the `<Root>` component cannot find `InterVariable` as a font in the document, it will automatically add a fallback which uses [Inter’s CDN](https://rsms.me/inter/#faq-cdn). In all cases, we recommend self-hosting to avoid any potential security and reliability issues that may arise from the use of a third-party CDN.
66
+
36
67
  ## Contributing
37
68
 
38
69
  Are you interested in helping iTwinUI grow and expand? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/design-system/issues).
package/dist/DEV/bricks/Anchor.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import cx from "classnames";
3
- import { Role } from "@ariakit/react/role";
4
2
  import { Focusable } from "@ariakit/react/focusable";
3
+ import { Role } from "@ariakit/react/role";
4
+ import cx from "classnames";
5
5
  import { forwardRef } from "./~utils.js";
6
6
  const Anchor = forwardRef((props, forwardedRef) => {
7
7
  const { tone = "neutral", ...rest } = props;
package/dist/DEV/bricks/Avatar.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import cx from "classnames";
3
2
  import { Role } from "@ariakit/react/role";
3
+ import cx from "classnames";
4
4
  import { forwardRef } from "./~utils.js";
5
5
  const Avatar = forwardRef((props, forwardedRef) => {
6
6
  const { size = "medium", initials, alt, image, children, ...rest } = props;
package/dist/DEV/bricks/Badge.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import cx from "classnames";
3
2
  import { Role } from "@ariakit/react/role";
3
+ import cx from "classnames";
4
4
  import { forwardRef } from "./~utils.js";
5
5
  const Badge = forwardRef((props, forwardedRef) => {
6
6
  const { tone = "neutral", variant = "solid", label, ...rest } = props;
package/dist/DEV/bricks/Button.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import cx from "classnames";
3
2
  import { Button as AkButton } from "@ariakit/react/button";
4
- import { forwardRef } from "./~utils.js";
3
+ import cx from "classnames";
5
4
  import { useGhostAlignment } from "./~utils.GhostAligner.js";
5
+ import { forwardRef } from "./~utils.js";
6
6
  const Button = forwardRef(
7
7
  (props, forwardedRef) => {
8
8
  const { variant = "solid", tone = "neutral", ...rest } = props;
package/dist/DEV/bricks/Checkbox.js CHANGED
@@ -1,10 +1,8 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import { Checkbox as AkCheckbox } from "@ariakit/react/checkbox";
2
3
  import cx from "classnames";
3
- import {
4
- Checkbox as AkCheckbox
5
- } from "@ariakit/react/checkbox";
6
- import { forwardRef } from "./~utils.js";
7
4
  import { useFieldControlType } from "./Field.internal.js";
5
+ import { forwardRef } from "./~utils.js";
8
6
  const Checkbox = forwardRef(
9
7
  (props, forwardedRef) => {
10
8
  useFieldControlType("checkable");
package/dist/DEV/bricks/Chip.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { Role } from "@ariakit/react/role";
2
3
  import cx from "classnames";
3
4
  import * as React from "react";
4
- import { Role } from "@ariakit/react/role";
5
- import { forwardRef } from "./~utils.js";
6
- import { IconButton } from "./IconButton.js";
7
5
  import { Dismiss } from "./Icon.js";
6
+ import { IconButton } from "./IconButton.js";
7
+ import { forwardRef } from "./~utils.js";
8
8
  const Chip = forwardRef((props, forwardedRef) => {
9
9
  const { variant = "solid", onDismiss, label, ...rest } = props;
10
10
  const baseId = React.useId();
package/dist/DEV/bricks/Description.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "./~utils.js";
3
2
  import cx from "classnames";
4
3
  import { Text } from "./Text.js";
4
+ import { forwardRef } from "./~utils.js";
5
5
  const Description = forwardRef(
6
6
  (props, forwardedRef) => {
7
7
  const { tone, ...rest } = props;
package/dist/DEV/bricks/Divider.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import cx from "classnames";
3
2
  import { Role } from "@ariakit/react/role";
4
3
  import { Separator } from "@ariakit/react/separator";
4
+ import cx from "classnames";
5
5
  import { forwardRef } from "./~utils.js";
6
6
  const Divider = forwardRef((props, forwardedRef) => {
7
7
  const { presentational, ...rest } = props;
package/dist/DEV/bricks/DropdownMenu.js CHANGED
@@ -1,27 +1,25 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import cx from "classnames";
4
- import * as ListItem from "./~utils.ListItem.js";
5
- import { Button } from "./Button.js";
6
2
  import { Button as ButtonAk } from "@ariakit/react/button";
7
- import { Kbd } from "./Kbd.js";
8
- import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
9
- import {
10
- forwardRef
11
- } from "./~utils.js";
12
- import { usePopoverApi } from "./~hooks.js";
13
3
  import {
14
- MenuProvider,
15
- useMenuContext,
16
4
  Menu,
17
5
  MenuButton,
18
6
  MenuItem,
19
- MenuItemCheckbox
7
+ MenuItemCheckbox,
8
+ MenuProvider,
9
+ useMenuContext
20
10
  } from "@ariakit/react/menu";
11
+ import { usePopoverContext } from "@ariakit/react/popover";
21
12
  import { useStoreState } from "@ariakit/react/store";
13
+ import cx from "classnames";
14
+ import * as React from "react";
15
+ import { Button } from "./Button.js";
16
+ import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
22
17
  import { predefinedSymbols } from "./Kbd.internal.js";
23
- import { usePopoverContext } from "@ariakit/react/popover";
18
+ import { Kbd } from "./Kbd.js";
19
+ import { usePopoverApi } from "./~hooks.js";
24
20
  import { Dot } from "./~utils.Dot.js";
21
+ import * as ListItem from "./~utils.ListItem.js";
22
+ import { forwardRef } from "./~utils.js";
25
23
  function DropdownMenuRoot(props) {
26
24
  const {
27
25
  children,
package/dist/DEV/bricks/ErrorRegion.js CHANGED
@@ -1,19 +1,19 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import cx from "classnames";
4
2
  import {
5
- DialogProvider,
3
+ Dialog,
6
4
  DialogDisclosure,
7
- Dialog
5
+ DialogProvider
8
6
  } from "@ariakit/react/dialog";
9
7
  import { Role } from "@ariakit/react/role";
10
- import { forwardRef } from "./~utils.js";
11
- import { ChevronDown, Dismiss, StatusWarning } from "./Icon.js";
12
- import { Text } from "./Text.js";
13
- import { IconButton } from "./IconButton.js";
8
+ import cx from "classnames";
9
+ import * as React from "react";
14
10
  import { Button } from "./Button.js";
15
- import { useControlledState } from "./~hooks.js";
11
+ import { ChevronDown, StatusWarning } from "./Icon.js";
12
+ import { IconButtonPresentation } from "./IconButton.internal.js";
13
+ import { Text } from "./Text.js";
16
14
  import { VisuallyHidden } from "./VisuallyHidden.js";
15
+ import { useControlledState } from "./~hooks.js";
16
+ import { forwardRef } from "./~utils.js";
17
17
  const ErrorRegionRoot = forwardRef(
18
18
  (props, forwardedRef) => {
19
19
  const { label, items, expanded, onExpandedChange, ...rest } = props;
@@ -46,23 +46,14 @@ const ErrorRegionRoot = forwardRef(
46
46
  /* @__PURE__ */ jsx(
47
47
  Text,
48
48
  {
49
+ render: /* @__PURE__ */ jsx("span", {}),
49
50
  id: labelId,
50
51
  className: "\u{1F95D}-error-region-label",
51
52
  variant: "body-sm",
52
53
  children: label
53
54
  }
54
55
  ),
55
- /* @__PURE__ */ jsx(
56
- IconButton,
57
- {
58
- inert: true,
59
- render: /* @__PURE__ */ jsx("span", {}),
60
- role: void 0,
61
- label: "",
62
- icon: /* @__PURE__ */ jsx(ChevronDown, {}),
63
- variant: "ghost"
64
- }
65
- )
56
+ /* @__PURE__ */ jsx(IconButtonPresentation, { inert: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
66
57
  ]
67
58
  }
68
59
  ),
@@ -91,10 +82,8 @@ const ErrorRegionItem = forwardRef(
91
82
  message,
92
83
  messageId = `${generatedId}-message`,
93
84
  actions,
94
- onDismiss,
95
85
  ...rest
96
86
  } = props;
97
- const dismissButtonId = `${generatedId}-dismiss`;
98
87
  return /* @__PURE__ */ jsxs(
99
88
  Role.div,
100
89
  {
@@ -103,27 +92,7 @@ const ErrorRegionItem = forwardRef(
103
92
  className: cx("\u{1F95D}-error-region-item", props.className),
104
93
  ref: forwardedRef,
105
94
  children: [
106
- /* @__PURE__ */ jsx(
107
- Text,
108
- {
109
- id: messageId,
110
- variant: "body-sm",
111
- className: "\u{1F95D}-error-region-item-message",
112
- children: message
113
- }
114
- ),
115
- onDismiss && /* @__PURE__ */ jsx(
116
- IconButton,
117
- {
118
- id: dismissButtonId,
119
- className: "\u{1F95D}-error-region-item-dismiss",
120
- variant: "ghost",
121
- label: "Dismiss",
122
- "aria-labelledby": `${dismissButtonId} ${messageId}`,
123
- icon: /* @__PURE__ */ jsx(Dismiss, {}),
124
- onClick: onDismiss
125
- }
126
- ),
95
+ /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
127
96
  /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
128
97
  ]
129
98
  }
package/dist/DEV/bricks/Field.internal.js CHANGED
@@ -1,10 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import {
4
- useCollectionStore,
5
- Collection
6
- } from "@ariakit/react/collection";
2
+ import { Collection, useCollectionStore } from "@ariakit/react/collection";
7
3
  import { useStoreState } from "@ariakit/react/store";
4
+ import * as React from "react";
8
5
  function FieldCollection(props) {
9
6
  const fieldElementCollection = useCollectionStore({
10
7
  defaultItems: []
package/dist/DEV/bricks/Field.js CHANGED
@@ -1,19 +1,16 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import cx from "classnames";
4
- import { Role } from "@ariakit/react/role";
5
2
  import {
6
- useCollectionContext,
7
- CollectionItem
3
+ CollectionItem,
4
+ useCollectionContext
8
5
  } from "@ariakit/react/collection";
6
+ import { Role } from "@ariakit/react/role";
9
7
  import { useStoreState } from "@ariakit/react/store";
10
- import { forwardRef } from "./~utils.js";
11
- import {
12
- FieldCollection,
13
- FieldControlTypeContext
14
- } from "./Field.internal.js";
15
- import { Label } from "./Label.js";
8
+ import cx from "classnames";
9
+ import * as React from "react";
16
10
  import { Description } from "./Description.js";
11
+ import { FieldCollection, FieldControlTypeContext } from "./Field.internal.js";
12
+ import { Label } from "./Label.js";
13
+ import { forwardRef } from "./~utils.js";
17
14
  const FieldRoot = forwardRef((props, forwardedRef) => {
18
15
  const { layout, ...rest } = props;
19
16
  return /* @__PURE__ */ jsx(
package/dist/DEV/bricks/Icon.js CHANGED
@@ -1,18 +1,14 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import cx from "classnames";
4
2
  import { Role } from "@ariakit/react/role";
5
- import {
6
- forwardRef,
7
- getOwnerDocument,
8
- parseDOM
9
- } from "./~utils.js";
3
+ import cx from "classnames";
4
+ import * as React from "react";
10
5
  import {
11
6
  HtmlSanitizerContext,
12
7
  spriteSheetId,
13
8
  useRootNode
14
9
  } from "./Root.internal.js";
15
10
  import { useLatestRef, useSafeContext } from "./~hooks.js";
11
+ import { forwardRef, getOwnerDocument, parseDOM } from "./~utils.js";
16
12
  const Icon = forwardRef((props, forwardedRef) => {
17
13
  const { href: hrefProp, size, alt, ...rest } = props;
18
14
  const isDecorative = !alt;
package/dist/DEV/bricks/IconButton.internal.js ADDED
@@ -0,0 +1,23 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Role } from "@ariakit/react/role";
3
+ import cx from "classnames";
4
+ import * as React from "react";
5
+ import { forwardRef } from "./~utils.js";
6
+ const IconButtonContext = React.createContext({ iconSize: "regular" });
7
+ const IconButtonPresentation = forwardRef((props, forwardedRef) => {
8
+ const { variant, ...rest } = props;
9
+ return /* @__PURE__ */ jsx(
10
+ Role.span,
11
+ {
12
+ ...rest,
13
+ className: cx("\u{1F95D}-icon-button", "\u{1F95D}-button", props.className),
14
+ "data-kiwi-variant": variant,
15
+ ref: forwardedRef
16
+ }
17
+ );
18
+ });
19
+ DEV: IconButtonPresentation.displayName = "IconButtonPresentation";
20
+ export {
21
+ IconButtonContext,
22
+ IconButtonPresentation
23
+ };
package/dist/DEV/bricks/IconButton.js CHANGED
@@ -1,32 +1,40 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
- import cx from "classnames";
4
3
  import { Button } from "./Button.js";
5
- import { VisuallyHidden } from "./VisuallyHidden.js";
6
4
  import { Icon } from "./Icon.js";
5
+ import {
6
+ IconButtonContext,
7
+ IconButtonPresentation
8
+ } from "./IconButton.internal.js";
7
9
  import { Tooltip } from "./Tooltip.js";
8
- import { forwardRef } from "./~utils.js";
10
+ import { VisuallyHidden } from "./VisuallyHidden.js";
9
11
  import { Dot } from "./~utils.Dot.js";
12
+ import { forwardRef } from "./~utils.js";
10
13
  const IconButton = forwardRef(
11
14
  (props, forwardedRef) => {
12
15
  const { label, icon, isActive, labelVariant, dot, ...rest } = props;
13
16
  const baseId = React.useId();
14
17
  const labelId = `${baseId}-label`;
15
18
  const dotId = `${baseId}-dot`;
16
- const button = /* @__PURE__ */ jsxs(
17
- Button,
19
+ const { iconSize } = React.useContext(IconButtonContext);
20
+ const button = /* @__PURE__ */ jsx(
21
+ IconButtonPresentation,
18
22
  {
19
- "aria-pressed": isActive,
20
- "aria-labelledby": labelId,
21
- "aria-describedby": dot ? dotId : void 0,
22
- ...rest,
23
- className: cx("\u{1F95D}-icon-button", props.className),
24
- ref: forwardedRef,
25
- children: [
26
- /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
27
- typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
28
- dot ? /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-icon-button-dot", children: dot }) : null
29
- ]
23
+ render: /* @__PURE__ */ jsxs(
24
+ Button,
25
+ {
26
+ "aria-pressed": isActive,
27
+ "aria-labelledby": labelId,
28
+ "aria-describedby": dot ? dotId : void 0,
29
+ ...rest,
30
+ ref: forwardedRef,
31
+ children: [
32
+ /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
33
+ typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon, size: iconSize }) : icon,
34
+ dot ? /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-icon-button-dot", children: dot }) : null
35
+ ]
36
+ }
37
+ )
30
38
  }
31
39
  );
32
40
  if (labelVariant === "visually-hidden") {
package/dist/DEV/bricks/Kbd.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import cx from "classnames";
3
2
  import { Role } from "@ariakit/react/role";
4
- import { forwardRef } from "./~utils.js";
5
- import { VisuallyHidden } from "./VisuallyHidden.js";
3
+ import cx from "classnames";
6
4
  import { predefinedSymbols } from "./Kbd.internal.js";
5
+ import { VisuallyHidden } from "./VisuallyHidden.js";
6
+ import { forwardRef } from "./~utils.js";
7
7
  const Kbd = forwardRef((props, forwardedRef) => {
8
8
  const { variant = "solid", symbol, children, ...rest } = props;
9
9
  DEV: {
package/dist/DEV/bricks/Label.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import cx from "classnames";
3
2
  import { Role } from "@ariakit/react/role";
3
+ import cx from "classnames";
4
4
  import { forwardRef } from "./~utils.js";
5
5
  const Label = forwardRef((props, forwardedRef) => {
6
6
  return /* @__PURE__ */ jsx(
package/dist/DEV/bricks/Radio.js CHANGED
@@ -1,10 +1,8 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import { Radio as AkRadio } from "@ariakit/react/radio";
2
3
  import cx from "classnames";
3
- import {
4
- Radio as AkRadio
5
- } from "@ariakit/react/radio";
6
- import { forwardRef } from "./~utils.js";
7
4
  import { useFieldControlType } from "./Field.internal.js";
5
+ import { forwardRef } from "./~utils.js";
8
6
  const Radio = forwardRef((props, forwardedRef) => {
9
7
  useFieldControlType("checkable");
10
8
  return /* @__PURE__ */ jsx(
package/dist/DEV/bricks/Root.js CHANGED
@@ -1,11 +1,18 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import * as ReactDOM from "react-dom";
4
- import { Role } from "@ariakit/react/role";
5
2
  import { PortalContext } from "@ariakit/react/portal";
3
+ import { Role } from "@ariakit/react/role";
6
4
  import cx from "classnames";
5
+ import * as React from "react";
6
+ import * as ReactDOM from "react-dom";
7
7
  import foundationsCss from "../foundations/styles.css.js";
8
+ import {
9
+ HtmlSanitizerContext,
10
+ RootNodeContext,
11
+ spriteSheetId,
12
+ useRootNode
13
+ } from "./Root.internal.js";
8
14
  import bricksCss from "./styles.css.js";
15
+ import { useLayoutEffect, useMergedRefs } from "./~hooks.js";
9
16
  import {
10
17
  forwardRef,
11
18
  getOwnerDocument,
@@ -13,13 +20,6 @@ import {
13
20
  isBrowser,
14
21
  isDocument
15
22
  } from "./~utils.js";
16
- import { useLayoutEffect, useMergedRefs } from "./~hooks.js";
17
- import {
18
- HtmlSanitizerContext,
19
- RootNodeContext,
20
- spriteSheetId,
21
- useRootNode
22
- } from "./Root.internal.js";
23
23
  const css = foundationsCss + bricksCss;
24
24
  const Root = forwardRef((props, forwardedRef) => {
25
25
  const {
@@ -188,7 +188,7 @@ function InlineSpriteSheet() {
188
188
  }
189
189
  function loadFonts(rootNode) {
190
190
  const ownerWindow = getWindow(rootNode);
191
- if (!ownerWindow || Array.from(ownerWindow.document.fonts).some(
191
+ if (!ownerWindow?.document?.fonts || Array.from(ownerWindow.document.fonts).some(
192
192
  (font) => font.family === "InterVariable"
193
193
  )) {
194
194
  return;
package/dist/DEV/bricks/Select.js CHANGED
@@ -1,13 +1,10 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import cx from "classnames";
4
2
  import { Role } from "@ariakit/react/role";
5
- import {
6
- forwardRef,
7
- isBrowser
8
- } from "./~utils.js";
9
- import { DisclosureArrow } from "./Icon.js";
3
+ import cx from "classnames";
4
+ import * as React from "react";
10
5
  import { useFieldControlType } from "./Field.internal.js";
6
+ import { DisclosureArrow } from "./Icon.js";
7
+ import { forwardRef, isBrowser } from "./~utils.js";
11
8
  const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
12
9
  const HtmlSelectContext = React.createContext(() => {
13
10
  });
package/dist/DEV/bricks/Switch.js CHANGED
@@ -1,10 +1,8 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import { Checkbox as AkCheckbox } from "@ariakit/react/checkbox";
2
3
  import cx from "classnames";
3
- import {
4
- Checkbox as AkCheckbox
5
- } from "@ariakit/react/checkbox";
6
- import { forwardRef } from "./~utils.js";
7
4
  import { useFieldControlType } from "./Field.internal.js";
5
+ import { forwardRef } from "./~utils.js";
8
6
  const Switch = forwardRef(
9
7
  (props, forwardedRef) => {
10
8
  useFieldControlType("checkable");
package/dist/DEV/bricks/Table.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { Role } from "@ariakit/react/role";
3
- import * as React from "react";
4
3
  import cx from "classnames";
5
- import { forwardRef } from "./~utils.js";
4
+ import * as React from "react";
6
5
  import { useMergedRefs, useSafeContext } from "./~hooks.js";
6
+ import { forwardRef } from "./~utils.js";
7
7
  const TableContext = React.createContext(void 0);
8
8
  const TableHeaderContext = React.createContext(false);
9
9
  const HtmlTable = forwardRef((props, forwardedRef) => {
package/dist/DEV/bricks/Tabs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import cx from "classnames";
3
2
  import * as AkTab from "@ariakit/react/tab";
3
+ import cx from "classnames";
4
4
  import { forwardRef } from "./~utils.js";
5
5
  function Tabs(props) {
6
6
  const {
package/dist/DEV/bricks/TextBox.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import { Role } from "@ariakit/react/role";
4
2
  import { Focusable } from "@ariakit/react/focusable";
3
+ import { Role } from "@ariakit/react/role";
5
4
  import cx from "classnames";
5
+ import * as React from "react";
6
+ import { useFieldControlType } from "./Field.internal.js";
6
7
  import { Icon } from "./Icon.js";
7
- import { useMergedRefs } from "./~hooks.js";
8
+ import { useEventHandlers, useMergedRefs } from "./~hooks.js";
8
9
  import { forwardRef } from "./~utils.js";
9
- import { useFieldControlType } from "./Field.internal.js";
10
10
  const TextBoxInput = forwardRef(
11
11
  (props, forwardedRef) => {
12
12
  useFieldControlType("textlike");
@@ -72,14 +72,12 @@ const TextBoxRoot = forwardRef(
72
72
  ...props,
73
73
  "data-kiwi-disabled": disabled,
74
74
  className: cx("\u{1F95D}-text-box", props.className),
75
- onPointerDown: (e) => {
76
- props.onPointerDown?.(e);
77
- if (e.defaultPrevented) return;
75
+ onPointerDown: useEventHandlers(props.onPointerDown, (e) => {
78
76
  if (disabled) return;
79
77
  if (e.target !== e.currentTarget) return;
80
78
  e.preventDefault();
81
79
  inputRef.current?.focus();
82
- },
80
+ }),
83
81
  ref: forwardedRef
84
82
  }
85
83
  )
package/dist/DEV/bricks/Toolbar.js CHANGED
@@ -1,16 +1,18 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import cx from "classnames";
3
2
  import * as Toolbar from "@ariakit/react/toolbar";
3
+ import cx from "classnames";
4
+ import * as React from "react";
5
+ import { IconButtonContext } from "./IconButton.internal.js";
4
6
  import { forwardRef } from "./~utils.js";
5
7
  const ToolbarGroup = forwardRef((props, forwardedRef) => {
6
- return /* @__PURE__ */ jsx(
8
+ return /* @__PURE__ */ jsx(IconButtonContext, { value: React.useMemo(() => ({ iconSize: "large" }), []), children: /* @__PURE__ */ jsx(
7
9
  Toolbar.Toolbar,
8
10
  {
9
11
  ...props,
10
12
  className: cx("\u{1F95D}-toolbar", props.className),
11
13
  ref: forwardedRef
12
14
  }
13
- );
15
+ ) });
14
16
  });
15
17
  DEV: ToolbarGroup.displayName = "Toolbar.Group";
16
18
  const ToolbarItem = forwardRef(
package/dist/DEV/bricks/Tooltip.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import * as React from "react";
3
- import cx from "classnames";
4
- import * as AkTooltip from "@ariakit/react/tooltip";
5
2
  import { useStoreState } from "@ariakit/react/store";
6
- import { forwardRef } from "./~utils.js";
3
+ import * as AkTooltip from "@ariakit/react/tooltip";
4
+ import cx from "classnames";
5
+ import * as React from "react";
7
6
  import { usePopoverApi } from "./~hooks.js";
7
+ import { forwardRef } from "./~utils.js";
8
8
  const Tooltip = forwardRef(
9
9
  (props, forwardedRef) => {
10
10
  const generatedId = React.useId();