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

package/dist/DEV/bricks/Tabs.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import * as AkTab from "@ariakit/react/tab";
 import { useControlledState } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 function Tabs(props) {
@@ -19,7 +19,7 @@ function Tabs(props) {
     setSelectedIdProp
   );
   return /* @__PURE__ */ jsx(
-    Ariakit.TabProvider,
+    AkTab.TabProvider,
     {
       selectedId,
       setSelectedId: React.useCallback(
@@ -46,10 +46,10 @@ const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
   return /* @__PURE__ */ jsx(
-    Ariakit.TabList,
+    AkTab.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,
@@ -62,7 +62,7 @@ const TabList = forwardRef((props, forwardedRef) => {
 DEV: TabList.displayName = "Tabs.TabList";
 const Tab = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.Tab,
+    AkTab.Tab,
     {
       accessibleWhenDisabled: true,
       ...props,
@@ -74,7 +74,7 @@ const Tab = forwardRef((props, forwardedRef) => {
 DEV: Tab.displayName = "Tabs.Tab";
 const TabPanel = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.TabPanel,
+    AkTab.TabPanel,
     {
       ...props,
       className: cx("\u{1F95D}-tab-panel", props.className),

package/dist/DEV/bricks/Text.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Text = forwardRef((props, forwardedRef) => {
   const { variant, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...rest,
       className: cx("\u{1F95D}-text", props.className),

package/dist/DEV/bricks/TextBox.js

@@ -1,39 +1,77 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Focusable } from "@ariakit/react/focusable";
 import cx from "classnames";
-import { useFieldId } from "./Field.js";
+import { FieldControl } 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 fieldId = useFieldId();
+    const { id, ...rest } = props;
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
     React.useEffect(() => {
       setDisabled?.(props.disabled);
     }, [setDisabled, props.disabled]);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.input,
+      FieldControl,
       {
-        id: fieldId,
-        ...props,
-        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        type: "textlike",
+        id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Focusable,
+          Role.input,
           {
-            accessibleWhenDisabled: true,
-            render: props.render || /* @__PURE__ */ jsx("input", {})
+            readOnly: props.disabled,
+            ...rest,
+            className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Focusable,
+              {
+                accessibleWhenDisabled: true,
+                render: props.render || /* @__PURE__ */ jsx("input", {})
+              }
+            ),
+            ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
           }
-        ),
-        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+        )
       }
     );
   }
 );
 DEV: TextBoxInput.displayName = "TextBox.Input";
+const TextBoxTextarea = forwardRef(
+  (props, forwardedRef) => {
+    const { id, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      FieldControl,
+      {
+        type: "textlike",
+        id,
+        render: /* @__PURE__ */ jsx(
+          Role.textarea,
+          {
+            readOnly: props.disabled,
+            ...rest,
+            className: cx("\u{1F95D}-text-box", props.className),
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Focusable,
+              {
+                accessibleWhenDisabled: true,
+                render: props.render || /* @__PURE__ */ jsx("textarea", {})
+              }
+            ),
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+DEV: TextBoxTextarea.displayName = "TextBox.Textarea";
 const TextBoxRoot = forwardRef(
   (props, forwardedRef) => {
     const inputRef = React.useRef(null);
@@ -43,7 +81,7 @@ const TextBoxRoot = forwardRef(
       {
         value: React.useMemo(() => ({ setDisabled, inputRef }), []),
         children: /* @__PURE__ */ jsx(
-          Ariakit.Role.div,
+          Role.div,
           {
             ...props,
             "data-kiwi-disabled": disabled,
@@ -80,7 +118,7 @@ DEV: TextBoxIcon.displayName = "TextBox.Icon";
 const TextBoxText = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.span,
+      Role.span,
       {
         ...props,
         className: cx("\u{1F95D}-text-box-decoration", props.className),
@@ -96,5 +134,5 @@ export {
   TextBoxInput as Input,
   TextBoxRoot as Root,
   TextBoxText as Text,
-  Textarea
+  TextBoxTextarea as Textarea
 };

package/dist/DEV/bricks/Tooltip.js

@@ -1,38 +1,29 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import { forwardRef, supportsPopover } from "./~utils.js";
+import * as AkTooltip from "@ariakit/react/tooltip";
+import { useStoreState } from "@ariakit/react/store";
+import { forwardRef } from "./~utils.js";
+import { usePopoverApi } from "./~hooks.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,
       unmountOnHide = type === "none",
       ...rest
     } = props;
-    const store = Ariakit.useTooltipStore();
-    const open = Ariakit.useStoreState(store, (state) => state.open);
-    const popover = Ariakit.useStoreState(
-      store,
-      (state) => state.popoverElement
-    );
-    React.useEffect(
-      function syncPopoverWithOpenState() {
-        if (popover?.isConnected) {
-          popover?.togglePopover?.(open);
-        }
-      },
-      [open, popover]
-    );
+    const store = AkTooltip.useTooltipStore();
+    const open = useStoreState(store, (store2) => store2.open);
+    const popover = usePopoverApi(store);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      Ariakit.TooltipProvider,
+      AkTooltip.TooltipProvider,
       {
         store,
         defaultOpen: defaultOpenProp,
@@ -40,28 +31,29 @@ const Tooltip = forwardRef(
         setOpen: setOpenProp,
         children: [
           /* @__PURE__ */ jsx(
-            Ariakit.TooltipAnchor,
+            AkTooltip.TooltipAnchor,
             {
               render: children,
+              "data-has-popover-open": open || void 0,
               ...type === "description" && { "aria-describedby": id },
               ...type === "label" && { "aria-labelledby": id }
             }
           ),
           /* @__PURE__ */ jsx(
-            Ariakit.Tooltip,
+            AkTooltip.Tooltip,
             {
               "aria-hidden": "true",
               ...rest,
               unmountOnHide,
-              className: cx("\u{1F95D}-tooltip", className),
+              className: cx("\u{1F95D}-tooltip", props.className),
               ref: forwardedRef,
               id,
               style: {
-                zIndex: supportsPopover ? void 0 : 9999,
+                ...popover.style,
                 ...props.style
               },
-              wrapperProps: { popover: "manual" },
-              portal: !supportsPopover,
+              wrapperProps: popover.wrapperProps,
+              portal: popover.portal,
               children: content
             }
           )

package/dist/DEV/bricks/Tree.js

@@ -1,118 +1,26 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import * as ListItem from "./ListItem.js";
-import { IconButton } from "./IconButton.js";
-import { Icon } from "./Icon.js";
+import { Role } from "@ariakit/react/role";
+import { useCompositeStore, Composite } from "@ariakit/react/composite";
 import { forwardRef } from "./~utils.js";
+import { Root as TreeItemRoot, Action as TreeItemAction } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(Ariakit.Role.div, { ...props, role: "list", ref: forwardedRef, children: props.children });
-});
-DEV: Tree.displayName = "Tree.Root";
-const TreeItem = forwardRef((props, forwardedRef) => {
-  const { selected, content, children, className, expanded, style, ...rest } = props;
-  const parentContext = React.useContext(TreeItemContext);
-  const level = parentContext ? parentContext.level + 1 : 1;
-  const firstSelected = !!selected && !parentContext?.selected;
+  const composite = useCompositeStore({ orientation: "vertical" });
   return /* @__PURE__ */ jsx(
-    TreeItemContext.Provider,
+    Role.div,
     {
-      value: React.useMemo(
-        () => ({
-          level,
-          expanded,
-          selected
-        }),
-        [level, expanded, selected]
-      ),
-      children: /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-current": firstSelected ? true : void 0, children: [
-        /* @__PURE__ */ jsx(
-          ListItem.Root,
-          {
-            ...rest,
-            "data-kiwi-expanded": expanded,
-            "data-kiwi-selected": selected,
-            "data-kiwi-parent-selected": parentContext?.selected,
-            className: cx("\u{1F95D}-tree-item", className),
-            style: {
-              ...style,
-              "--\u{1F95D}tree-item-level": level
-            },
-            ref: forwardedRef,
-            role: void 0,
-            children: content
-          }
-        ),
-        children && /* @__PURE__ */ jsx("div", { role: "list", children })
-      ] })
+      role: "tree",
+      ...props,
+      render: /* @__PURE__ */ jsx(Composite, { store: composite }),
+      className: cx("\u{1F95D}-tree", props.className),
+      ref: forwardedRef,
+      children: props.children
     }
   );
 });
-DEV: TreeItem.displayName = "Tree.Item";
-const TreeItemContent = forwardRef(
-  (props, forwardedRef) => {
-    const { children, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      ListItem.Content,
-      {
-        ...rest,
-        className: cx("\u{1F95D}-tree-item-content", props.className),
-        ref: forwardedRef,
-        children: /* @__PURE__ */ jsx("button", { type: "button", children })
-      }
-    );
-  }
-);
-DEV: TreeItemContent.displayName = "Tree.Content";
-const TreeItemExpander = forwardRef(
-  (props, forwardedRef) => {
-    const context = React.useContext(TreeItemContext);
-    const expanded = context?.expanded;
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        icon: /* @__PURE__ */ jsx(TreeChevron, {}),
-        label: "Toggle",
-        "aria-expanded": expanded === void 0 ? void 0 : expanded,
-        ...props,
-        className: cx("\u{1F95D}-tree-item-expander", props.className),
-        variant: "ghost",
-        labelVariant: "visually-hidden",
-        ref: forwardedRef
-      }
-    );
-  }
-);
-DEV: TreeItemExpander.displayName = "Tree.Expander";
-const TreeChevron = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        ...props,
-        render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
-          {
-            width: "16",
-            height: "16",
-            fill: "currentColor",
-            viewBox: "0 0 16 16",
-            render: props.render,
-            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" })
-          }
-        ),
-        className: cx("\u{1F95D}-tree-chevron", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-DEV: TreeChevron.displayName = "TreeChevron";
-const TreeItemContext = React.createContext(void 0);
+DEV: Tree.displayName = "Tree.Root";
 export {
-  TreeItemContent as Content,
-  TreeItemExpander as Expander,
-  TreeItem as Item,
+  TreeItemRoot as Item,
+  TreeItemAction as ItemAction,
   Tree as Root
 };

package/dist/DEV/bricks/TreeItem.js

@@ -0,0 +1,224 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cx from "classnames";
+import { Role } from "@ariakit/react/role";
+import {
+  CompositeItem
+} from "@ariakit/react/composite";
+import { Toolbar } from "@ariakit/react/toolbar";
+import * as ListItem from "./~utils.ListItem.js";
+import { IconButton } from "./IconButton.js";
+import { Icon } from "./Icon.js";
+import { forwardRef } from "./~utils.js";
+import { useEventHandlers } from "./~hooks.js";
+import { GhostAligner, useGhostAlignment } from "./~utils.GhostAligner.js";
+const TreeItemContext = React.createContext(void 0);
+const TreeItemRoot = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      "aria-level": level,
+      selected,
+      expanded,
+      icon,
+      unstable_decorations,
+      label,
+      description,
+      actions,
+      onSelectedChange,
+      onExpandedChange,
+      onClick: onClickProp,
+      onKeyDown: onKeyDownProp,
+      ...rest
+    } = props;
+    const handleClick = (event) => {
+      if (selected === void 0) return;
+      event.stopPropagation();
+      onSelectedChange?.(!selected);
+    };
+    const handleKeyDown = (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        return;
+      }
+      if (expanded === void 0) return;
+      if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        onExpandedChange?.(event.key === "ArrowRight");
+      }
+    };
+    const labelId = React.useId();
+    const descriptionId = React.useId();
+    const decorationId = React.useId();
+    const describedBy = React.useMemo(() => {
+      const idRefs = [];
+      if (description) idRefs.push(descriptionId);
+      if (unstable_decorations || icon) idRefs.push(decorationId);
+      return idRefs.length > 0 ? idRefs.join(" ") : void 0;
+    }, [unstable_decorations, icon, decorationId, description, descriptionId]);
+    return /* @__PURE__ */ jsx(
+      TreeItemContext.Provider,
+      {
+        value: React.useMemo(
+          () => ({
+            level,
+            expanded,
+            selected
+          }),
+          [level, expanded, selected]
+        ),
+        children: /* @__PURE__ */ jsx(
+          CompositeItem,
+          {
+            render: /* @__PURE__ */ jsx(Role, { ...rest }),
+            onClick: useEventHandlers(
+              onClickProp,
+              handleClick
+            ),
+            onKeyDown: useEventHandlers(
+              onKeyDownProp,
+              handleKeyDown
+            ),
+            role: "treeitem",
+            "aria-expanded": expanded,
+            "aria-selected": selected,
+            "aria-labelledby": labelId,
+            "aria-describedby": describedBy,
+            "aria-level": level,
+            className: cx("\u{1F95D}-tree-item", props.className),
+            ref: forwardedRef,
+            children: /* @__PURE__ */ jsxs(
+              ListItem.Root,
+              {
+                "data-kiwi-expanded": expanded,
+                "data-kiwi-selected": selected,
+                className: "\u{1F95D}-tree-item-node",
+                style: { "--\u{1F95D}tree-item-level": level },
+                role: void 0,
+                children: [
+                  /* @__PURE__ */ jsxs(ListItem.Decoration, { children: [
+                    /* @__PURE__ */ jsx(GhostAligner, { align: description ? "block" : void 0, children: /* @__PURE__ */ jsx(
+                      TreeItemExpander,
+                      {
+                        onClick: () => {
+                          if (expanded === void 0) return;
+                          onExpandedChange?.(!expanded);
+                        }
+                      }
+                    ) }),
+                    icon || unstable_decorations ? /* @__PURE__ */ jsx(
+                      Role,
+                      {
+                        className: "\u{1F95D}-tree-item-decoration",
+                        id: decorationId,
+                        render: React.isValidElement(icon) ? icon : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : void 0,
+                        children: !icon ? unstable_decorations : null
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label }),
+                  description ? /* @__PURE__ */ jsx(
+                    ListItem.Content,
+                    {
+                      id: descriptionId,
+                      className: "\u{1F95D}-tree-item-description",
+                      children: description
+                    }
+                  ) : void 0,
+                  /* @__PURE__ */ jsx(
+                    ListItem.Decoration,
+                    {
+                      render: /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+DEV: TreeItemRoot.displayName = "TreeItem.Root";
+const TreeItemActions = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Toolbar,
+    {
+      ...props,
+      onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+      onKeyDown: useEventHandlers(props.onKeyDown, (e) => e.stopPropagation()),
+      className: cx("\u{1F95D}-tree-item-actions", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+DEV: TreeItemActions.displayName = "TreeItemActions";
+const TreeItemAction = forwardRef(
+  (props, forwardedRef) => {
+    const { visible, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        inert: visible === false ? true : void 0,
+        ...rest,
+        variant: "ghost",
+        className: cx("\u{1F95D}-tree-item-action", props.className),
+        "data-kiwi-visible": visible,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: TreeItemAction.displayName = "TreeItem.Action";
+const TreeItemExpander = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role.span,
+      {
+        "aria-hidden": "true",
+        ...props,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+        className: cx(
+          "\u{1F95D}-button",
+          "\u{1F95D}-icon-button",
+          "\u{1F95D}-ghost-aligner",
+          "\u{1F95D}-tree-item-expander",
+          props.className
+        ),
+        "data-kiwi-variant": "ghost",
+        "data-kiwi-ghost-align": useGhostAlignment(),
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx(TreeChevron, {})
+      }
+    );
+  }
+);
+DEV: TreeItemExpander.displayName = "TreeItemExpander";
+const TreeChevron = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            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" })
+          }
+        ),
+        className: cx("\u{1F95D}-tree-chevron", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: TreeChevron.displayName = "TreeChevron";
+export {
+  TreeItemAction as Action,
+  TreeItemRoot as Root
+};

package/dist/DEV/bricks/VisuallyHidden.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { VisuallyHidden as AkVisuallyHidden } from "@ariakit/react/visually-hidden";
 import { forwardRef } from "./~utils.js";
 const VisuallyHidden = forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Ariakit.VisuallyHidden, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ jsx(AkVisuallyHidden, { ...props, ref: forwardedRef });
   }
 );
 DEV: VisuallyHidden.displayName = "VisuallyHidden";

package/dist/DEV/bricks/index.js

@@ -1,8 +1,12 @@
 "use client";
 import { Root } from "./Root.js";
 import { Anchor } from "./Anchor.js";
+import { Avatar } from "./Avatar.js";
+import { Badge } from "./Badge.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";
@@ -10,18 +14,26 @@ import { IconButton } from "./IconButton.js";
 import { Field } from "./Field.js";
 import { Kbd } from "./Kbd.js";
 import { Label } from "./Label.js";
+import { ProgressBar } from "./ProgressBar.js";
 import { Radio } from "./Radio.js";
 import * as Select from "./Select.js";
+import { Spinner } from "./Spinner.js";
+import { Skeleton } from "./Skeleton.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,
+  Avatar,
+  Badge,
   Button,
   Checkbox,
+  Chip,
+  Description,
   Divider,
   DropdownMenu,
   Field,
@@ -29,13 +41,17 @@ export {
   IconButton,
   Kbd,
   Label,
+  ProgressBar,
   Radio,
   Root,
   Select,
+  Skeleton,
+  Spinner,
   Switch,
   Tabs,
   Text,
   TextBox,
   Tooltip,
+  Tree,
   VisuallyHidden
 };