@itwin/itwinui-react 5.0.0-alpha.1 → 5.0.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 5.0.0-alpha.2
+
+- Added initial `Tree` component, exposed as `<Tree.Root>` and `<Tree.Item>` subcomponents.
+- Added initial `<Spinner>` component for indicating quick, indeterminate progress.
+- Added `<Description>` component to be used within a `<Field>`.
+- Added initial `<Chip>` component.
+- Added `symbol` prop to `<Kbd>` for displaying predefined symbols.
+- Added `focusable` prop to `<Tabs.TabPanel>` component.
+- Fixed a visual issue where light color-scheme was using dark shadows.
+
 ## 5.0.0-alpha.1
 
 - Added `<Text>` component with a `variant` prop to support all text styles from Figma.

package/dist/DEV/bricks/Anchor.js

@@ -7,8 +7,8 @@ const Anchor = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Ariakit.Role.a,
     {
-      "data-kiwi-tone": tone,
       ...rest,
+      "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-anchor", props.className),
       render: /* @__PURE__ */ jsx(
         Ariakit.Focusable,

package/dist/DEV/bricks/Button.js

@@ -9,9 +9,9 @@ const Button = forwardRef(
       Ariakit.Button,
       {
         accessibleWhenDisabled: true,
+        ...rest,
         "data-kiwi-variant": variant,
         "data-kiwi-tone": tone,
-        ...rest,
         className: cx("\u{1F95D}-button", props.className),
         ref: forwardedRef
       }

package/dist/DEV/bricks/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
     const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       Ariakit.Checkbox,
       {
@@ -13,6 +14,7 @@ const Checkbox = forwardRef(
         id: fieldId,
         ...props,
         className: cx("\u{1F95D}-checkbox", props.className),
+        "aria-describedby": describedBy,
         ref: forwardedRef
       }
     );

package/dist/DEV/bricks/Chip.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
+import { forwardRef } from "./~utils.js";
+const Chip = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      "data-kiwi-variant": variant,
+      ...rest,
+      className: cx("\u{1F95D}-chip", props.className),
+      ref: forwardedRef,
+      children
+    }
+  );
+});
+DEV: Chip.displayName = "Chip";
+export {
+  Chip
+};

package/dist/DEV/bricks/Description.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { forwardRef } from "./~utils.js";
+import cx from "classnames";
+import { Text } from "./Text.js";
+import { useFieldRegisterDescribedBy } from "./Field.js";
+const Description = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const { id = generatedId, tone, ...rest } = props;
+    useFieldRegisterDescribedBy(id);
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ...rest,
+        id,
+        variant: "caption-md",
+        "data-kiwi-tone": tone ?? "neutral",
+        className: cx("\u{1F95D}-description", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  Description
+};

package/dist/DEV/bricks/Field.js

@@ -5,23 +5,74 @@ import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Field = forwardRef((props, forwardedRef) => {
   const fieldId = React.useId();
-  const { className, layout, ...rest } = props;
-  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(
+  const { layout, ...rest } = props;
+  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
     Ariakit.Role,
     {
       ...rest,
-      className: cx("\u{1F95D}-field", className),
+      className: cx("\u{1F95D}-field", props.className),
       "data-kiwi-layout": layout,
       ref: forwardedRef
     }
-  ) });
+  ) }) });
 });
 DEV: Field.displayName = "Field";
+const FieldDescribedByContext = React.createContext(void 0);
+function FieldDescribedByProvider(props) {
+  const [describedBy, setDescribedBy] = React.useState(/* @__PURE__ */ new Set());
+  const register = React.useCallback((id) => {
+    setDescribedBy((describedBy2) => {
+      const updated = new Set(describedBy2);
+      updated.add(id);
+      return updated;
+    });
+  }, []);
+  const unregister = React.useCallback((id) => {
+    setDescribedBy((describedBy2) => {
+      const updated = new Set(describedBy2);
+      updated.delete(id);
+      return updated;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    FieldDescribedByContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          describedBy,
+          register,
+          unregister
+        }),
+        [describedBy, register, unregister]
+      ),
+      children: props.children
+    }
+  );
+}
+function useFieldDescribedBy(ariaDescribedByProp) {
+  const describedBySet = React.useContext(FieldDescribedByContext)?.describedBy;
+  return React.useMemo(
+    () => !describedBySet || describedBySet.size === 0 ? ariaDescribedByProp : [...describedBySet, ariaDescribedByProp].filter(Boolean).join(" "),
+    [describedBySet, ariaDescribedByProp]
+  );
+}
+function useFieldRegisterDescribedBy(id) {
+  const context = React.useContext(FieldDescribedByContext);
+  const register = context?.register;
+  const unregister = context?.unregister;
+  React.useEffect(() => {
+    if (!register || !unregister) return;
+    register(id);
+    return () => unregister(id);
+  }, [id, register, unregister]);
+}
 const FieldIdContext = React.createContext(void 0);
 function useFieldId() {
   return React.useContext(FieldIdContext);
 }
 export {
   Field,
-  useFieldId
+  useFieldDescribedBy,
+  useFieldId,
+  useFieldRegisterDescribedBy
 };

package/dist/DEV/bricks/Icon.js

@@ -9,9 +9,9 @@ const Icon = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Ariakit.Role.svg,
     {
-      "data-kiwi-size": size,
       "aria-hidden": true,
       ...rest,
+      "data-kiwi-size": size,
       className: cx("\u{1F95D}-icon", props.className),
       ref: forwardedRef,
       children: /* @__PURE__ */ jsx("use", { href: `${props.href}#${iconId}` })

package/dist/DEV/bricks/IconButton.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
+import * as Ariakit from "@ariakit/react";
 import { Button } from "./Button.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Icon } from "./Icon.js";
@@ -8,11 +9,13 @@ import { forwardRef } from "./~utils.js";
 const IconButton = forwardRef(
   (props, forwardedRef) => {
     const { label, icon, isActive, labelVariant, ...rest } = props;
+    const toolbar = Ariakit.useToolbarContext();
     const button = /* @__PURE__ */ jsxs(
       Button,
       {
         "aria-pressed": isActive,
         ...rest,
+        render: toolbar ? /* @__PURE__ */ jsx(Ariakit.ToolbarItem, { render: props.render }) : props.render,
         className: cx("\u{1F95D}-icon-button", props.className),
         ref: forwardedRef,
         children: [

package/dist/DEV/bricks/Kbd.js

@@ -1,17 +1,49 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "./~utils.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+const predefinedSymbols = {
+  Backspace: "\u232B",
+  Command: "\u2318",
+  Control: "Ctrl",
+  Down: "\u2193",
+  Eject: "\u23CF",
+  Enter: "\u21B5",
+  Escape: "Esc",
+  Left: "\u2190",
+  Option: "\u2325",
+  Right: "\u2192",
+  Shift: "\u21E7",
+  Space: "\u2423",
+  Tab: "Tab",
+  Up: "\u2191"
+};
 const Kbd = forwardRef((props, forwardedRef) => {
-  const { variant = "solid", ...rest } = props;
+  const { variant = "solid", symbol, children, ...rest } = props;
+  DEV: {
+    if (symbol && !(symbol in predefinedSymbols)) {
+      console.error(
+        `Kbd: Invalid symbol "${symbol}". Must be one of: ${Object.keys(predefinedSymbols).join(", ")}`
+      );
+    }
+  }
+  let content = children;
+  if (symbol) {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: predefinedSymbols[symbol] }),
+      children || /* @__PURE__ */ jsx(VisuallyHidden, { children: symbol })
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     Ariakit.Role,
     {
-      "data-kiwi-variant": variant,
       ...rest,
+      "data-kiwi-variant": variant,
       className: cx("\u{1F95D}-kbd", props.className),
       render: props.render || /* @__PURE__ */ jsx("kbd", {}),
-      ref: forwardedRef
+      ref: forwardedRef,
+      children: content
     }
   );
 });

package/dist/DEV/bricks/Radio.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
   const fieldId = useFieldId();
+  const describedBy = useFieldDescribedBy(props["aria-describedby"]);
   return /* @__PURE__ */ jsx(
     Ariakit.Radio,
     {
@@ -12,6 +13,7 @@ const Radio = forwardRef((props, forwardedRef) => {
       id: fieldId,
       ...props,
       className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+      "aria-describedby": describedBy,
       ref: forwardedRef
     }
   );

package/dist/DEV/bricks/Select.js

@@ -7,7 +7,7 @@ import {
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
@@ -27,6 +27,7 @@ const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
     const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     React.useEffect(
       function updateContext() {
         setIsHtmlSelect(true);
@@ -40,6 +41,7 @@ const HtmlSelect = forwardRef(
           id: fieldId,
           ...props,
           className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
+          "aria-describedby": describedBy,
           "data-kiwi-tone": "neutral",
           "data-kiwi-variant": "solid",
           ref: forwardedRef

package/dist/DEV/bricks/Spinner.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Ariakit from "@ariakit/react";
+import cx from "classnames";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { forwardRef } from "./~utils.js";
+const Spinner = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      alt = "Loading\u2026",
+      size = "medium",
+      tone = "neutral",
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      Ariakit.Role,
+      {
+        ...rest,
+        "data-kiwi-size": size,
+        "data-kiwi-tone": tone,
+        className: cx("\u{1F95D}-spinner", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              stroke: "currentColor",
+              "stroke-linecap": "round",
+              d: "M9.5 1.674a6.503 6.503 0 0 1 0 12.652m-3-12.652a6.503 6.503 0 0 0 0 12.652"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: alt })
+        ]
+      }
+    );
+  }
+);
+DEV: Spinner.displayName = "Spinner";
+export {
+  Spinner
+};

package/dist/DEV/bricks/Switch.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
     const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       Ariakit.Checkbox,
       {
@@ -13,6 +14,7 @@ const Switch = forwardRef(
         id: fieldId,
         ...props,
         className: cx("\u{1F95D}-switch", props.className),
+        "aria-describedby": describedBy,
         role: "switch",
         ref: forwardedRef
       }

package/dist/DEV/bricks/Tabs.js

@@ -48,8 +48,8 @@ const TabList = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Ariakit.TabList,
     {
-      "data-kiwi-tone": tone,
       ...rest,
+      "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-tab-list", props.className),
       style: {
         "--\u{1F95D}tab-active-stripe-view-transition-name": viewTransitionName,

package/dist/DEV/bricks/TextBox.js

@@ -2,13 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { Textarea } from "./Textarea.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     const fieldId = useFieldId();
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
@@ -20,6 +21,7 @@ const TextBoxInput = forwardRef(
       {
         id: fieldId,
         ...props,
+        "aria-describedby": describedBy,
         className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
         render: /* @__PURE__ */ jsx(
           Ariakit.Focusable,

package/dist/DEV/bricks/Textarea.js

@@ -1,17 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-import { useFieldId } from "./Field.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Textarea = forwardRef(
   (props, forwardedRef) => {
     const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       Ariakit.Role.textarea,
       {
         id: fieldId,
         ...props,
         className: cx("\u{1F95D}-text-box", props.className),
+        "aria-describedby": describedBy,
         render: /* @__PURE__ */ jsx(
           Ariakit.Focusable,
           {

package/dist/DEV/bricks/Tooltip.js

@@ -5,12 +5,12 @@ import * as Ariakit from "@ariakit/react";
 import { forwardRef, supportsPopover } from "./~utils.js";
 const Tooltip = forwardRef(
   (props, forwardedRef) => {
+    const generatedId = React.useId();
     const {
       content,
       children,
-      className,
       type = "description",
-      id = React.useId(),
+      id = generatedId,
       defaultOpen: defaultOpenProp,
       open: openProp,
       setOpen: setOpenProp,
@@ -53,7 +53,7 @@ const Tooltip = forwardRef(
               "aria-hidden": "true",
               ...rest,
               unmountOnHide,
-              className: cx("\u{1F95D}-tooltip", className),
+              className: cx("\u{1F95D}-tooltip", props.className),
               ref: forwardedRef,
               id,
               style: {

package/dist/DEV/bricks/Tree.js

@@ -6,15 +6,34 @@ import * as ListItem from "./ListItem.js";
 import { IconButton } from "./IconButton.js";
 import { Icon } from "./Icon.js";
 import { forwardRef } from "./~utils.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
 const Tree = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(Ariakit.Role.div, { ...props, role: "list", ref: forwardedRef, children: props.children });
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      ...props,
+      className: cx("\u{1F95D}-tree", props.className),
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("div", { role: "list", children: props.children })
+    }
+  );
 });
 DEV: Tree.displayName = "Tree.Root";
 const TreeItem = forwardRef((props, forwardedRef) => {
-  const { selected, content, children, className, expanded, style, ...rest } = props;
+  const {
+    selected,
+    children,
+    expanded,
+    icon,
+    label,
+    actions,
+    style,
+    onSelectedChange,
+    onExpandedChange,
+    ...rest
+  } = props;
   const parentContext = React.useContext(TreeItemContext);
   const level = parentContext ? parentContext.level + 1 : 1;
-  const firstSelected = !!selected && !parentContext?.selected;
   return /* @__PURE__ */ jsx(
     TreeItemContext.Provider,
     {
@@ -22,26 +41,39 @@ const TreeItem = forwardRef((props, forwardedRef) => {
         () => ({
           level,
           expanded,
-          selected
+          selected,
+          onSelectedChange
         }),
-        [level, expanded, selected]
+        [level, expanded, selected, onSelectedChange]
       ),
-      children: /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-current": firstSelected ? true : void 0, children: [
-        /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs("div", { role: "listitem", children: [
+        /* @__PURE__ */ jsxs(
           ListItem.Root,
           {
             ...rest,
             "data-kiwi-expanded": expanded,
             "data-kiwi-selected": selected,
-            "data-kiwi-parent-selected": parentContext?.selected,
-            className: cx("\u{1F95D}-tree-item", className),
+            className: cx("\u{1F95D}-tree-item", props.className),
             style: {
               ...style,
               "--\u{1F95D}tree-item-level": level
             },
             ref: forwardedRef,
             role: void 0,
-            children: content
+            children: [
+              /* @__PURE__ */ jsx(
+                TreeItemExpander,
+                {
+                  onClick: () => {
+                    if (expanded === void 0) return;
+                    onExpandedChange?.(!expanded);
+                  }
+                }
+              ),
+              typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+              /* @__PURE__ */ jsx(TreeItemContent, { label }),
+              /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
+            ]
           }
         ),
         children && /* @__PURE__ */ jsx("div", { role: "list", children })
@@ -52,19 +84,50 @@ const TreeItem = forwardRef((props, forwardedRef) => {
 DEV: TreeItem.displayName = "Tree.Item";
 const TreeItemContent = forwardRef(
   (props, forwardedRef) => {
-    const { children, ...rest } = props;
+    const { label, ...rest } = props;
+    const context = React.useContext(TreeItemContext);
     return /* @__PURE__ */ jsx(
       ListItem.Content,
       {
         ...rest,
         className: cx("\u{1F95D}-tree-item-content", props.className),
         ref: forwardedRef,
-        children: /* @__PURE__ */ jsx("button", { type: "button", children })
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (!context?.onSelectedChange || context.selected === void 0)
+                return;
+              context.onSelectedChange(!context.selected);
+            },
+            children: [
+              label,
+              context?.selected && /* @__PURE__ */ jsx(VisuallyHidden, { children: "Selected item" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+DEV: TreeItemContent.displayName = "TreeItemContent";
+const TreeItemActions = forwardRef(
+  (props, forwardedRef) => {
+    const { visible, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Ariakit.Toolbar,
+      {
+        ...rest,
+        className: cx("\u{1F95D}-tree-item-actions", props.className),
+        "data-kiwi-visible": visible,
+        ref: forwardedRef,
+        children: props.children
       }
     );
   }
 );
-DEV: TreeItemContent.displayName = "Tree.Content";
+DEV: TreeItemActions.displayName = "TreeItemActions";
 const TreeItemExpander = forwardRef(
   (props, forwardedRef) => {
     const context = React.useContext(TreeItemContext);
@@ -84,7 +147,7 @@ const TreeItemExpander = forwardRef(
     );
   }
 );
-DEV: TreeItemExpander.displayName = "Tree.Expander";
+DEV: TreeItemExpander.displayName = "TreeItemExpander";
 const TreeChevron = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
@@ -111,8 +174,6 @@ const TreeChevron = forwardRef(
 DEV: TreeChevron.displayName = "TreeChevron";
 const TreeItemContext = React.createContext(void 0);
 export {
-  TreeItemContent as Content,
-  TreeItemExpander as Expander,
   TreeItem as Item,
   Tree as Root
 };

package/dist/DEV/bricks/index.js

@@ -3,6 +3,8 @@ import { Root } from "./Root.js";
 import { Anchor } from "./Anchor.js";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
+import { Chip } from "./Chip.js";
+import { Description } from "./Description.js";
 import * as DropdownMenu from "./DropdownMenu.js";
 import { Divider } from "./Divider.js";
 import { Icon } from "./Icon.js";
@@ -12,16 +14,20 @@ import { Kbd } from "./Kbd.js";
 import { Label } from "./Label.js";
 import { Radio } from "./Radio.js";
 import * as Select from "./Select.js";
+import { Spinner } from "./Spinner.js";
 import { Switch } from "./Switch.js";
 import * as Tabs from "./Tabs.js";
 import { Text } from "./Text.js";
 import * as TextBox from "./TextBox.js";
+import * as Tree from "./Tree.js";
 import { Tooltip } from "./Tooltip.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 export {
   Anchor,
   Button,
   Checkbox,
+  Chip,
+  Description,
   Divider,
   DropdownMenu,
   Field,
@@ -32,10 +38,12 @@ export {
   Radio,
   Root,
   Select,
+  Spinner,
   Switch,
   Tabs,
   Text,
   TextBox,
   Tooltip,
+  Tree,
   VisuallyHidden
 };