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

package/dist/DEV/bricks/Kbd.js

@@ -1,22 +1,52 @@
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-const Kbd = React.forwardRef(
-  (props, forwardedRef) => {
-    const { variant = "solid", ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      Ariakit.Role,
-      {
-        "data-kiwi-variant": variant,
-        ...rest,
-        className: cx("\u{1F95D}-kbd", props.className),
-        render: props.render || /* @__PURE__ */ jsx("kbd", {}),
-        ref: forwardedRef
-      }
-    );
+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", 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,
+    {
+      ...rest,
+      "data-kiwi-variant": variant,
+      className: cx("\u{1F95D}-kbd", props.className),
+      render: props.render || /* @__PURE__ */ jsx("kbd", {}),
+      ref: forwardedRef,
+      children: content
+    }
+  );
+});
 DEV: Kbd.displayName = "Kbd";
 export {
   Kbd

package/dist/DEV/bricks/Label.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
 import { useFieldId } from "./Field.js";
-const Label = React.forwardRef((props, forwardedRef) => {
+import { forwardRef } from "./~utils.js";
+const Label = forwardRef((props, forwardedRef) => {
   const fieldId = useFieldId();
   return /* @__PURE__ */ jsx(
     Ariakit.Role.label,

package/dist/DEV/bricks/ListItem.js

@@ -1,31 +1,31 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-const ListItem = React.forwardRef(
+import { forwardRef } from "./~utils.js";
+const ListItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      role: "listitem",
+      ...props,
+      className: cx("\u{1F95D}-list-item", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: ListItem.displayName = "ListItem.Root";
+const ListItemContent = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.div,
+      Ariakit.Role.span,
       {
-        role: "listitem",
         ...props,
-        className: cx("\u{1F95D}-list-item", props.className),
+        className: cx("\u{1F95D}-list-item-content", props.className),
         ref: forwardedRef
       }
     );
   }
 );
-DEV: ListItem.displayName = "ListItem.Root";
-const ListItemContent = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
-    {
-      ...props,
-      className: cx("\u{1F95D}-list-item-content", props.className),
-      ref: forwardedRef
-    }
-  );
-});
 DEV: ListItemContent.displayName = "ListItem.Content";
 export {
   ListItemContent as Content,

package/dist/DEV/bricks/Radio.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
-const Radio = React.forwardRef((props, forwardedRef) => {
+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 = React.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/Root.js

@@ -4,48 +4,46 @@ import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
-import { isBrowser } from "./~utils.js";
+import { forwardRef, isBrowser } from "./~utils.js";
 import { useMergedRefs } from "./~hooks.js";
 const css = foundationsCss + bricksCss;
-const Root = React.forwardRef(
-  (props, forwardedRef) => {
-    const { children, synchronizeColorScheme = false, ...rest } = props;
-    return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
-      /* @__PURE__ */ jsx(Styles, {}),
-      /* @__PURE__ */ jsx(Fonts, {}),
-      synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
-      children
-    ] });
-  }
-);
+const Root = forwardRef((props, forwardedRef) => {
+  const { children, synchronizeColorScheme = false, ...rest } = props;
+  return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx(Styles, {}),
+    /* @__PURE__ */ jsx(Fonts, {}),
+    synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
+    children
+  ] });
+});
 DEV: Root.displayName = "Root";
 const RootNodeContext = React.createContext(null);
 function useRootNode() {
   return React.useContext(RootNodeContext);
 }
-const RootInternal = React.forwardRef((props, forwardedRef) => {
-  const { children, colorScheme, density, ...rest } = props;
-  const [rootNode, setRootNode] = React.useState(
-    null
-  );
-  const findRootNodeFromRef = React.useCallback((element) => {
-    if (!element) return;
-    const rootNode2 = element.getRootNode();
-    if (!isDocument(rootNode2) && !isShadow(rootNode2)) return;
-    setRootNode(rootNode2);
-  }, []);
-  return /* @__PURE__ */ jsx(
-    Ariakit.Role,
-    {
-      ...rest,
-      className: cx("\u{1F95D}-root", props.className),
-      "data-kiwi-theme": colorScheme,
-      "data-kiwi-density": density,
-      ref: useMergedRefs(forwardedRef, findRootNodeFromRef),
-      children: /* @__PURE__ */ jsx(RootNodeContext.Provider, { value: rootNode, children })
-    }
-  );
-});
+const RootInternal = forwardRef(
+  (props, forwardedRef) => {
+    const { children, colorScheme, density, ...rest } = props;
+    const [rootNode, setRootNode] = React.useState(null);
+    const findRootNodeFromRef = React.useCallback((element) => {
+      if (!element) return;
+      const rootNode2 = element.getRootNode();
+      if (!isDocument(rootNode2) && !isShadow(rootNode2)) return;
+      setRootNode(rootNode2);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role,
+      {
+        ...rest,
+        className: cx("\u{1F95D}-root", props.className),
+        "data-kiwi-theme": colorScheme,
+        "data-kiwi-density": density,
+        ref: useMergedRefs(forwardedRef, findRootNodeFromRef),
+        children: /* @__PURE__ */ jsx(RootNodeContext.Provider, { value: rootNode, children })
+      }
+    );
+  }
+);
 function SynchronizeColorScheme({
   colorScheme
 }) {
@@ -105,8 +103,8 @@ function Fonts() {
   return null;
 }
 function loadFonts(rootNode) {
-  const ownerDocument = getOwnerDocument(rootNode);
-  if (!ownerDocument || Array.from(ownerDocument.fonts).some(
+  const ownerWindow = getWindow(rootNode);
+  if (!ownerWindow || Array.from(ownerWindow.document.fonts).some(
     (font) => font.family === "InterVariable"
   )) {
     return;
@@ -116,12 +114,16 @@ function loadFonts(rootNode) {
     italic: "https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.1"
   };
   for (const [style, url] of Object.entries(interStyles)) {
-    const font = new FontFace("InterVariable", `url(${url}) format("woff2")`, {
-      display: "swap",
-      weight: "100 900",
-      style
-    });
-    ownerDocument.fonts.add(font);
+    const font = new ownerWindow.FontFace(
+      "InterVariable",
+      `url(${url}) format("woff2")`,
+      {
+        display: "swap",
+        weight: "100 900",
+        style
+      }
+    );
+    ownerWindow.document.fonts.add(font);
   }
 }
 const supportsAdoptedStylesheets = isBrowser && "adoptedStyleSheets" in Document.prototype;

package/dist/DEV/bricks/Select.js

@@ -0,0 +1,57 @@
+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,
+  isBrowser
+} from "./~utils.js";
+import { DisclosureArrow } from "./Icon.js";
+import { useFieldDescribedBy, useFieldId } from "./Field.js";
+const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
+const HtmlSelectContext = React.createContext(() => {
+});
+const SelectRoot = forwardRef((props, forwardedRef) => {
+  const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
+  return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      ...props,
+      className: cx("\u{1F95D}-select-root", props.className),
+      "data-kiwi-has-select": !supportsHas && isHtmlSelect ? "true" : void 0,
+      ref: forwardedRef
+    }
+  ) });
+});
+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);
+      },
+      [setIsHtmlSelect]
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Ariakit.Role.select,
+        {
+          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
+        }
+      ),
+      /* @__PURE__ */ jsx(DisclosureArrow, { className: "\u{1F95D}-select-arrow" })
+    ] });
+  }
+);
+export {
+  HtmlSelect,
+  SelectRoot as Root
+};

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,22 +1,26 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
-const Switch = React.forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
-  return /* @__PURE__ */ jsx(
-    Ariakit.Checkbox,
-    {
-      accessibleWhenDisabled: true,
-      id: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-switch", props.className),
-      role: "switch",
-      ref: forwardedRef
-    }
-  );
-});
+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,
+      {
+        accessibleWhenDisabled: true,
+        id: fieldId,
+        ...props,
+        className: cx("\u{1F95D}-switch", props.className),
+        "aria-describedby": describedBy,
+        role: "switch",
+        ref: forwardedRef
+      }
+    );
+  }
+);
 DEV: Switch.displayName = "Switch";
 export {
   Switch

package/dist/DEV/bricks/Tabs.js

@@ -4,6 +4,7 @@ import * as ReactDOM from "react-dom";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
 import { useControlledState } from "./~hooks.js";
+import { forwardRef } from "./~utils.js";
 function Tabs(props) {
   const {
     defaultSelectedId,
@@ -41,14 +42,14 @@ function Tabs(props) {
   );
 }
 DEV: Tabs.displayName = "Tabs.Root";
-const TabList = React.forwardRef((props, forwardedRef) => {
+const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
   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,
@@ -59,21 +60,19 @@ const TabList = React.forwardRef((props, forwardedRef) => {
   );
 });
 DEV: TabList.displayName = "Tabs.TabList";
-const Tab = React.forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Ariakit.Tab,
-      {
-        accessibleWhenDisabled: true,
-        ...props,
-        className: cx("\u{1F95D}-tab", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
+const Tab = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Tab,
+    {
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}-tab", props.className),
+      ref: forwardedRef
+    }
+  );
+});
 DEV: Tab.displayName = "Tabs.Tab";
-const TabPanel = React.forwardRef((props, forwardedRef) => {
+const TabPanel = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Ariakit.TabPanel,
     {

package/dist/DEV/bricks/Text.js

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

package/dist/DEV/bricks/TextBox.js

@@ -2,36 +2,41 @@ 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";
-const TextBoxInput = React.forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
-  const rootContext = React.useContext(TextBoxRootContext);
-  const setDisabled = rootContext?.setDisabled;
-  React.useEffect(() => {
-    setDisabled?.(props.disabled);
-  }, [setDisabled, props.disabled]);
-  return /* @__PURE__ */ jsx(
-    Ariakit.Role.input,
-    {
-      id: fieldId,
-      ...props,
-      className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Focusable,
-        {
-          accessibleWhenDisabled: true,
-          render: props.render || /* @__PURE__ */ jsx("input", {})
-        }
-      ),
-      ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
-    }
-  );
-});
+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;
+    React.useEffect(() => {
+      setDisabled?.(props.disabled);
+    }, [setDisabled, props.disabled]);
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.input,
+      {
+        id: fieldId,
+        ...props,
+        "aria-describedby": describedBy,
+        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Focusable,
+          {
+            accessibleWhenDisabled: true,
+            render: props.render || /* @__PURE__ */ jsx("input", {})
+          }
+        ),
+        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+      }
+    );
+  }
+);
 DEV: TextBoxInput.displayName = "TextBox.Input";
-const TextBoxRoot = React.forwardRef(
+const TextBoxRoot = forwardRef(
   (props, forwardedRef) => {
     const inputRef = React.useRef(null);
     const [disabled, setDisabled] = React.useState();
@@ -61,27 +66,31 @@ const TextBoxRoot = React.forwardRef(
   }
 );
 DEV: TextBoxRoot.displayName = "TextBox.Root";
-const TextBoxIcon = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
-      ...props,
-      className: cx("\u{1F95D}-text-box-decoration", props.className),
-      ref: forwardedRef
-    }
-  );
-});
+const TextBoxIcon = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        className: cx("\u{1F95D}-text-box-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 DEV: TextBoxIcon.displayName = "TextBox.Icon";
-const TextBoxText = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
-    {
-      ...props,
-      className: cx("\u{1F95D}-text-box-decoration", props.className),
-      ref: forwardedRef
-    }
-  );
-});
+const TextBoxText = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-text-box-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 DEV: TextBoxText.displayName = "TextBox.Text";
 const TextBoxRootContext = React.createContext(void 0);
 export {