@itwin/itwinui-react 5.0.0-alpha.12 → 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 (109) hide show
  1. package/CHANGELOG.md +24 -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 +23 -16
  12. package/dist/DEV/bricks/ErrorRegion.js +106 -0
  13. package/dist/DEV/bricks/Field.internal.js +2 -5
  14. package/dist/DEV/bricks/Field.js +17 -16
  15. package/dist/DEV/bricks/Icon.js +28 -7
  16. package/dist/DEV/bricks/IconButton.internal.js +23 -0
  17. package/dist/DEV/bricks/IconButton.js +24 -19
  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 +27 -0
  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 +254 -166
  31. package/dist/DEV/bricks/VisuallyHidden.js +10 -2
  32. package/dist/DEV/bricks/index.js +6 -2
  33. package/dist/DEV/bricks/styles.css.js +1 -1
  34. package/dist/DEV/bricks/~hooks.js +1 -1
  35. package/dist/DEV/bricks/~utils.Dot.js +22 -0
  36. package/dist/DEV/bricks/~utils.ListItem.js +2 -2
  37. package/dist/DEV/foundations/styles.css.js +1 -1
  38. package/dist/bricks/Anchor.d.ts +1 -1
  39. package/dist/bricks/Anchor.js +2 -2
  40. package/dist/bricks/Avatar.d.ts +1 -1
  41. package/dist/bricks/Avatar.js +1 -1
  42. package/dist/bricks/Badge.d.ts +1 -1
  43. package/dist/bricks/Badge.js +1 -1
  44. package/dist/bricks/Button.d.ts +1 -1
  45. package/dist/bricks/Button.js +2 -2
  46. package/dist/bricks/Checkbox.d.ts +2 -2
  47. package/dist/bricks/Checkbox.js +2 -4
  48. package/dist/bricks/Chip.d.ts +1 -1
  49. package/dist/bricks/Chip.js +3 -3
  50. package/dist/bricks/Description.d.ts +1 -1
  51. package/dist/bricks/Description.js +1 -1
  52. package/dist/bricks/Divider.d.ts +2 -2
  53. package/dist/bricks/Divider.js +1 -1
  54. package/dist/bricks/DropdownMenu.d.ts +5 -3
  55. package/dist/bricks/DropdownMenu.js +23 -16
  56. package/dist/bricks/ErrorRegion.d.ts +83 -0
  57. package/dist/bricks/ErrorRegion.js +104 -0
  58. package/dist/bricks/Field.d.ts +8 -2
  59. package/dist/bricks/Field.internal.d.ts +2 -1
  60. package/dist/bricks/Field.internal.js +2 -5
  61. package/dist/bricks/Field.js +17 -16
  62. package/dist/bricks/Icon.d.ts +4 -1
  63. package/dist/bricks/Icon.js +27 -7
  64. package/dist/bricks/IconButton.internal.d.ts +10 -0
  65. package/dist/bricks/IconButton.internal.js +22 -0
  66. package/dist/bricks/IconButton.js +24 -19
  67. package/dist/bricks/Kbd.d.ts +2 -2
  68. package/dist/bricks/Kbd.js +3 -3
  69. package/dist/bricks/Label.d.ts +1 -1
  70. package/dist/bricks/Label.js +1 -1
  71. package/dist/bricks/ProgressBar.d.ts +8 -2
  72. package/dist/bricks/Radio.d.ts +2 -2
  73. package/dist/bricks/Radio.js +2 -4
  74. package/dist/bricks/Root.d.ts +1 -1
  75. package/dist/bricks/Root.js +11 -11
  76. package/dist/bricks/Select.d.ts +1 -1
  77. package/dist/bricks/Select.js +4 -7
  78. package/dist/bricks/Skeleton.d.ts +1 -1
  79. package/dist/bricks/Spinner.d.ts +1 -1
  80. package/dist/bricks/Switch.d.ts +2 -2
  81. package/dist/bricks/Switch.js +2 -4
  82. package/dist/bricks/Table.d.ts +1 -1
  83. package/dist/bricks/Table.js +2 -2
  84. package/dist/bricks/Tabs.d.ts +1 -1
  85. package/dist/bricks/Tabs.js +1 -1
  86. package/dist/bricks/Text.d.ts +1 -1
  87. package/dist/bricks/TextBox.d.ts +1 -1
  88. package/dist/bricks/TextBox.js +6 -8
  89. package/dist/bricks/Toolbar.d.ts +36 -0
  90. package/dist/bricks/Toolbar.js +25 -0
  91. package/dist/bricks/Tooltip.d.ts +2 -2
  92. package/dist/bricks/Tooltip.js +4 -4
  93. package/dist/bricks/Tree.d.ts +2 -2
  94. package/dist/bricks/Tree.js +3 -3
  95. package/dist/bricks/TreeItem.d.ts +24 -8
  96. package/dist/bricks/TreeItem.js +243 -164
  97. package/dist/bricks/VisuallyHidden.d.ts +1 -1
  98. package/dist/bricks/VisuallyHidden.js +10 -2
  99. package/dist/bricks/index.d.ts +3 -1
  100. package/dist/bricks/index.js +6 -2
  101. package/dist/bricks/styles.css.js +1 -1
  102. package/dist/bricks/~hooks.js +1 -1
  103. package/dist/bricks/~utils.Dot.d.ts +11 -0
  104. package/dist/bricks/~utils.Dot.js +21 -0
  105. package/dist/bricks/~utils.ListItem.d.ts +1 -1
  106. package/dist/bricks/~utils.ListItem.js +2 -2
  107. package/dist/bricks/~utils.d.ts +1 -1
  108. package/dist/foundations/styles.css.js +1 -1
  109. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
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
+
17
+ ## 5.0.0-alpha.13
18
+
19
+ - Added new `unstable_ErrorRegion` component for displaying errors originating from `Tree`. See [#454](https://github.com/iTwin/design-system/pull/454).
20
+ - Added initial `unstable_Toolbar` component. See [#529](https://github.com/iTwin/design-system/pull/529).
21
+ - Added `dot` prop to `<Tree.ItemAction>`, matching the `dot` prop from `<IconButton>`.
22
+ - Also added `unstable_dot` prop to `<DropdownMenu.Item>`, although it's not meant to be used currently.
23
+ - Styling changes:
24
+ - Improved forced-colors mode styling for `<Icon>`, `<Button>` as anchor, and `<Tree.Item>`.
25
+ - Updated the color of `dot` used in `<IconButton>`.
26
+
3
27
  ## 5.0.0-alpha.12
4
28
 
5
29
  - **breaking**: Introduce composition API for `Field`. See [#449](https://github.com/iTwin/design-system/pull/449).
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,26 +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
3
  import {
10
- forwardRef
11
- } from "./~utils.js";
12
- import { usePopoverApi } from "./~hooks.js";
13
- 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";
20
+ import { Dot } from "./~utils.Dot.js";
21
+ import * as ListItem from "./~utils.ListItem.js";
22
+ import { forwardRef } from "./~utils.js";
24
23
  function DropdownMenuRoot(props) {
25
24
  const {
26
25
  children,
@@ -84,7 +83,8 @@ const DropdownMenuButton = forwardRef(
84
83
  DEV: DropdownMenuButton.displayName = "DropdownMenu.Button";
85
84
  const DropdownMenuItem = forwardRef(
86
85
  (props, forwardedRef) => {
87
- const { label, shortcuts, icon, ...rest } = props;
86
+ const { label, shortcuts, icon, unstable_dot, ...rest } = props;
87
+ const dotId = React.useId();
88
88
  return /* @__PURE__ */ jsxs(
89
89
  MenuItem,
90
90
  {
@@ -96,6 +96,7 @@ const DropdownMenuItem = forwardRef(
96
96
  ButtonAk,
97
97
  {
98
98
  accessibleWhenDisabled: true,
99
+ "aria-describedby": dotId,
99
100
  ...rest,
100
101
  className: cx("\u{1F95D}-dropdown-menu-item", props.className),
101
102
  ref: forwardedRef
@@ -106,7 +107,13 @@ const DropdownMenuItem = forwardRef(
106
107
  children: [
107
108
  icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
108
109
  /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
109
- shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
110
+ shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
111
+ unstable_dot ? /* @__PURE__ */ jsx(
112
+ ListItem.Decoration,
113
+ {
114
+ render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-dropdown-menu-item-dot", children: unstable_dot })
115
+ }
116
+ ) : null
110
117
  ]
111
118
  }
112
119
  );
package/dist/DEV/bricks/ErrorRegion.js ADDED
@@ -0,0 +1,106 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import {
3
+ Dialog,
4
+ DialogDisclosure,
5
+ DialogProvider
6
+ } from "@ariakit/react/dialog";
7
+ import { Role } from "@ariakit/react/role";
8
+ import cx from "classnames";
9
+ import * as React from "react";
10
+ import { Button } from "./Button.js";
11
+ import { ChevronDown, StatusWarning } from "./Icon.js";
12
+ import { IconButtonPresentation } from "./IconButton.internal.js";
13
+ import { Text } from "./Text.js";
14
+ import { VisuallyHidden } from "./VisuallyHidden.js";
15
+ import { useControlledState } from "./~hooks.js";
16
+ import { forwardRef } from "./~utils.js";
17
+ const ErrorRegionRoot = forwardRef(
18
+ (props, forwardedRef) => {
19
+ const { label, items, expanded, onExpandedChange, ...rest } = props;
20
+ const labelId = React.useId();
21
+ const sectionLabelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelId);
22
+ const [open, setOpen] = useControlledState(
23
+ false,
24
+ expanded,
25
+ onExpandedChange
26
+ );
27
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
28
+ /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": true, children: label }),
29
+ /* @__PURE__ */ jsx(DialogProvider, { open, setOpen, children: /* @__PURE__ */ jsx(
30
+ Role.section,
31
+ {
32
+ ...rest,
33
+ "aria-labelledby": sectionLabelledBy,
34
+ className: cx("\u{1F95D}-error-region", props.className),
35
+ "data-kiwi-visible": !!label,
36
+ "data-kiwi-expanded": open,
37
+ ref: forwardedRef,
38
+ children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", children: [
39
+ /* @__PURE__ */ jsxs(
40
+ DialogDisclosure,
41
+ {
42
+ className: "\u{1F95D}-error-region-header",
43
+ render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
44
+ children: [
45
+ /* @__PURE__ */ jsx(StatusWarning, { className: "\u{1F95D}-error-region-icon" }),
46
+ /* @__PURE__ */ jsx(
47
+ Text,
48
+ {
49
+ render: /* @__PURE__ */ jsx("span", {}),
50
+ id: labelId,
51
+ className: "\u{1F95D}-error-region-label",
52
+ variant: "body-sm",
53
+ children: label
54
+ }
55
+ ),
56
+ /* @__PURE__ */ jsx(IconButtonPresentation, { inert: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
57
+ ]
58
+ }
59
+ ),
60
+ /* @__PURE__ */ jsx(
61
+ Dialog,
62
+ {
63
+ className: "\u{1F95D}-error-region-dialog",
64
+ portal: false,
65
+ modal: false,
66
+ autoFocusOnShow: false,
67
+ "aria-labelledby": labelId,
68
+ children: /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-items", role: "list", children: items })
69
+ }
70
+ )
71
+ ] })
72
+ }
73
+ ) })
74
+ ] });
75
+ }
76
+ );
77
+ DEV: ErrorRegionRoot.displayName = "ErrorRegion.Root";
78
+ const ErrorRegionItem = forwardRef(
79
+ (props, forwardedRef) => {
80
+ const generatedId = React.useId();
81
+ const {
82
+ message,
83
+ messageId = `${generatedId}-message`,
84
+ actions,
85
+ ...rest
86
+ } = props;
87
+ return /* @__PURE__ */ jsxs(
88
+ Role.div,
89
+ {
90
+ ...rest,
91
+ role: "listitem",
92
+ className: cx("\u{1F95D}-error-region-item", props.className),
93
+ ref: forwardedRef,
94
+ children: [
95
+ /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
96
+ /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
97
+ ]
98
+ }
99
+ );
100
+ }
101
+ );
102
+ DEV: ErrorRegionItem.displayName = "ErrorRegion.Item";
103
+ export {
104
+ ErrorRegionItem as Item,
105
+ ErrorRegionRoot as Root
106
+ };
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(
@@ -35,11 +32,12 @@ DEV: FieldRoot.displayName = "Field";
35
32
  const FieldLabel = forwardRef(
36
33
  (props, forwardedRef) => {
37
34
  const store = useCollectionContext();
38
- const renderedItems = useStoreState(store, "renderedItems");
35
+ const renderedItems = useStoreState(
36
+ store,
37
+ "renderedItems"
38
+ );
39
39
  const fieldId = React.useMemo(
40
- () => renderedItems?.find(
41
- (item) => item.elementType === "control"
42
- )?.id,
40
+ () => renderedItems?.find((item) => item.elementType === "control")?.id,
43
41
  [renderedItems]
44
42
  );
45
43
  const getData = React.useCallback(
@@ -87,7 +85,10 @@ const FieldControl = forwardRef(
87
85
  const store = useCollectionContext();
88
86
  const generatedId = React.useId();
89
87
  const { id = store ? generatedId : void 0, ...rest } = props;
90
- const renderedItems = useStoreState(store, "renderedItems");
88
+ const renderedItems = useStoreState(
89
+ store,
90
+ "renderedItems"
91
+ );
91
92
  const describedBy = React.useMemo(() => {
92
93
  const idRefList = renderedItems?.filter(
93
94
  (item) => item.elementType === "description" || item.elementType === "error"
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;
@@ -251,8 +247,33 @@ const MoreHorizontal = forwardRef(
251
247
  }
252
248
  );
253
249
  DEV: MoreHorizontal.displayName = "MoreHorizontal";
250
+ const ChevronDown = forwardRef(
251
+ (props, forwardedRef) => {
252
+ return /* @__PURE__ */ jsx(
253
+ Icon,
254
+ {
255
+ ...props,
256
+ render: /* @__PURE__ */ jsx(
257
+ Role.svg,
258
+ {
259
+ width: "16",
260
+ height: "16",
261
+ fill: "currentColor",
262
+ viewBox: "0 0 16 16",
263
+ render: props.render,
264
+ children: /* @__PURE__ */ jsx("path", { d: "M4.146 6.146a.5.5 0 0 1 .708 0L8 9.293l3.146-3.147a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 0 1 0-.708Z" })
265
+ }
266
+ ),
267
+ className: cx("\u{1F95D}-chevron-down", props.className),
268
+ ref: forwardedRef
269
+ }
270
+ );
271
+ }
272
+ );
273
+ DEV: ChevronDown.displayName = "ChevronDown";
254
274
  export {
255
275
  Checkmark,
276
+ ChevronDown,
256
277
  DisclosureArrow,
257
278
  Dismiss,
258
279
  Icon,
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,11 +1,14 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
- import cx from "classnames";
4
- import { useToolbarContext, ToolbarItem } from "@ariakit/react/toolbar";
5
3
  import { Button } from "./Button.js";
6
- import { VisuallyHidden } from "./VisuallyHidden.js";
7
4
  import { Icon } from "./Icon.js";
5
+ import {
6
+ IconButtonContext,
7
+ IconButtonPresentation
8
+ } from "./IconButton.internal.js";
8
9
  import { Tooltip } from "./Tooltip.js";
10
+ import { VisuallyHidden } from "./VisuallyHidden.js";
11
+ import { Dot } from "./~utils.Dot.js";
9
12
  import { forwardRef } from "./~utils.js";
10
13
  const IconButton = forwardRef(
11
14
  (props, forwardedRef) => {
@@ -13,23 +16,25 @@ const IconButton = forwardRef(
13
16
  const baseId = React.useId();
14
17
  const labelId = `${baseId}-label`;
15
18
  const dotId = `${baseId}-dot`;
16
- const toolbar = useToolbarContext();
17
- const button = /* @__PURE__ */ jsxs(
18
- Button,
19
+ const { iconSize } = React.useContext(IconButtonContext);
20
+ const button = /* @__PURE__ */ jsx(
21
+ IconButtonPresentation,
19
22
  {
20
- "aria-pressed": isActive,
21
- "aria-labelledby": labelId,
22
- "aria-describedby": dot ? dotId : void 0,
23
- ...rest,
24
- "data-kiwi-dot": dot ? "true" : void 0,
25
- render: toolbar ? /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }) : props.render,
26
- className: cx("\u{1F95D}-icon-button", props.className),
27
- ref: forwardedRef,
28
- children: [
29
- /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
30
- typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
31
- dot ? /* @__PURE__ */ jsx(VisuallyHidden, { id: dotId, "aria-hidden": "true", children: dot }) : null
32
- ]
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
+ )
33
38
  }
34
39
  );
35
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
  });