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

package/dist/bricks/IconButton.d.ts

@@ -11,7 +11,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
     /**
      * Icon to be displayed inside the button.
      *
-     * Can be a URL of an SVG from the `kiwi-icons` package,
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package,
      * or a custom JSX icon.
      */
     icon: string | React.JSX.Element;
@@ -24,15 +24,30 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
      * @default "tooltip"
      */
     labelVariant?: "tooltip" | "visually-hidden";
+    /**
+     * A small dot displayed in the corner of the icon.
+     *
+     * The value of this prop gets used as the button's "accessible description".
+     *
+     * Example:
+     * ```tsx
+     * <IconButton
+     *   label="Messages"
+     *   dot="You have unread messages"
+     *   icon={…}
+     * />
+     * ```
+     */
+    dot?: string;
 }
 /**
  * An icon-only button, with a required accessible name.
  *
- * The icon can be a URL from the `kiwi-icons` package:
+ * The icon can be a URL from the `@itwin/itwinui-icons` package:
  * ```tsx
  * <IconButton
  *   label="Reveal full content"
- *   icon={new URL("@itwin/itwinui-icons/icons/arrow.svg", import.meta.url).href}
+ *   icon={new URL("@itwin/itwinui-icons/arrow.svg", import.meta.url).href}
  * />
  * ```
  *
@@ -55,6 +70,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
  *   isActive={isActive}
  *   onClick={() => setIsActive(!isActive)}
  * />
+ * ```
  */
 export declare const IconButton: React.ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
     variant: "ghost";
@@ -75,5 +91,5 @@ export declare const IconButton: React.ForwardRefExoticComponent<(Omit<IconButto
 }, "ref"> | Omit<IconButtonBaseProps & {
     variant?: Omit<React.ComponentProps<typeof Button>["variant"], "ghost">;
     isActive?: never;
-}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+}, "ref">) & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
 export {};

package/dist/bricks/IconButton.js

@@ -1,30 +1,43 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
+import { useToolbarContext, ToolbarItem } from "@ariakit/react/toolbar";
 import { Button } from "./Button.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Icon } from "./Icon.js";
 import { Tooltip } from "./Tooltip.js";
-const IconButton = React.forwardRef((props, forwardedRef) => {
-  const { label, icon, isActive, labelVariant, ...rest } = props;
-  const button = /* @__PURE__ */ jsxs(
-    Button,
-    {
-      "aria-pressed": isActive,
-      ...rest,
-      className: cx("\u{1F95D}-icon-button", props.className),
-      ref: forwardedRef,
-      children: [
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: label }),
-        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
-      ]
+import { forwardRef } from "./~utils.js";
+const IconButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, isActive, labelVariant, dot, ...rest } = props;
+    const baseId = React.useId();
+    const labelId = `${baseId}-label`;
+    const dotId = `${baseId}-dot`;
+    const toolbar = useToolbarContext();
+    const button = /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-pressed": isActive,
+        "aria-labelledby": labelId,
+        "aria-describedby": dot ? dotId : void 0,
+        ...rest,
+        "data-kiwi-dot": dot ? "true" : void 0,
+        render: toolbar ? /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }) : props.render,
+        className: cx("\u{1F95D}-icon-button", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
+          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+          dot ? /* @__PURE__ */ jsx(VisuallyHidden, { id: dotId, "aria-hidden": "true", children: dot }) : null
+        ]
+      }
+    );
+    if (labelVariant === "visually-hidden") {
+      return button;
     }
-  );
-  if (labelVariant === "visually-hidden") {
-    return button;
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
   }
-  return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
-});
+);
 export {
   IconButton
 };

package/dist/bricks/Kbd.d.ts

@@ -1,8 +1,18 @@
-import * as React from "react";
-import type { BaseProps } from "./~utils.js";
+import { type BaseProps } from "./~utils.js";
+import { type PredefinedSymbol } from "./Kbd.internal.js";
 interface KbdProps extends BaseProps<"kbd"> {
     /** @default "solid" */
     variant?: "solid" | "muted" | "ghost";
+    /**
+     * Display a specific key symbol from a predefined list. This is useful for
+     * displaying modifier keys or special keys, such as `Control`, `Shift`, `Enter`, etc.
+     *
+     * Example:
+     * ```tsx
+     * <Kbd symbol="Control" />
+     * ```
+     */
+    symbol?: PredefinedSymbol;
 }
 /**
  * A styled wrapper over the HTML `<kbd>` element. This is typically
@@ -11,6 +21,10 @@ interface KbdProps extends BaseProps<"kbd"> {
  * ```tsx
  * <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>
  * ```
+ *
+ * ```tsx
+ * <Kbd symbol="Control" />
+ * ```
  */
-export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
 export {};

package/dist/bricks/Kbd.internal.d.ts

@@ -0,0 +1,17 @@
+export type PredefinedSymbol = keyof typeof predefinedSymbols;
+export declare const predefinedSymbols: {
+    readonly Backspace: "⌫";
+    readonly Command: "⌘";
+    readonly Control: "Ctrl";
+    readonly Down: "↓";
+    readonly Eject: "⏏";
+    readonly Enter: "↵";
+    readonly Escape: "Esc";
+    readonly Left: "←";
+    readonly Option: "⌥";
+    readonly Right: "→";
+    readonly Shift: "⇧";
+    readonly Space: "␣";
+    readonly Tab: "Tab";
+    readonly Up: "↑";
+};

package/dist/bricks/Kbd.internal.js

@@ -0,0 +1,19 @@
+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"
+};
+export {
+  predefinedSymbols
+};

package/dist/bricks/Kbd.js

@@ -1,22 +1,30 @@
-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 { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { predefinedSymbols } from "./Kbd.internal.js";
+const Kbd = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", symbol, children, ...rest } = props;
+  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(
+    Role,
+    {
+      ...rest,
+      "data-kiwi-variant": variant,
+      className: cx("\u{1F95D}-kbd", props.className),
+      render: props.render || /* @__PURE__ */ jsx("kbd", {}),
+      ref: forwardedRef,
+      children: content
+    }
+  );
+});
 export {
   Kbd
 };

package/dist/bricks/Label.d.ts

@@ -1,6 +1,25 @@
-import * as React from "react";
-import type { BaseProps } from "./~utils.js";
+import { type BaseProps } from "./~utils.js";
 interface LabelProps extends BaseProps<"label"> {
 }
-export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * A styled wrapper over the HTML `<label>` element, used for labelling form controls.
+ *
+ * Can be used standalone:
+
+ * ```tsx
+ * <Label htmlFor="my-input">Label</Label>
+ * <TextBox.Input id="my-input" />
+ * ```
+ *
+ * Or within a `Field` component to automatically manage ID associations:
+ *
+ * ```tsx
+ * <Field>
+ *   <Label>Label</Label>
+ *   <TextBox.Input />
+ * </Field>
+ * ```
+ *
+ */
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLElement | HTMLLabelElement>>;
 export {};

package/dist/bricks/Label.js

@@ -1,17 +1,20 @@
 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) => {
-  const fieldId = useFieldId();
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+import { FieldLabel } from "./Field.js";
+const Label = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.label,
+    FieldLabel,
     {
-      htmlFor: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-label", props.className),
-      ref: forwardedRef
+      render: /* @__PURE__ */ jsx(
+        Role.label,
+        {
+          ...props,
+          className: cx("\u{1F95D}-label", props.className),
+          ref: forwardedRef
+        }
+      )
     }
   );
 });

package/dist/bricks/ProgressBar.d.ts

@@ -0,0 +1,31 @@
+import { type BaseProps } from "./~utils.js";
+interface ProgressBarProps extends Omit<BaseProps, "aria-labelledby">, Required<Pick<BaseProps, "aria-labelledby">> {
+    /**
+     * The size of the progress bar.
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * The tone of the progress bar.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "accent";
+}
+/**
+ * A linear progress bar for indicating progress of an operation (or loading of data).
+ * This component maps to the [ARIA `progressbar` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role)
+ * and must be labelled using `aria-labelledby`.
+ *
+ * Example:
+ * ```tsx
+ * <ProgressBar aria-labelledby={…} />
+ * ```
+ *
+ * Supports a `tone` prop to change the tone (color) of the progress bar.
+ * Supports a `size` prop to change the size of the progress bar.
+ *
+ * Note: This component currently only supports indeterminate progress, and should
+ * only be used for indicating the progress of short operations (i.e. less than 5 seconds).
+ */
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/ProgressBar.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
+import { forwardRef } from "./~utils.js";
+const ProgressBar = forwardRef(
+  (props, forwardedRef) => {
+    const { size = "medium", tone = "neutral", ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        role: "progressbar",
+        ...rest,
+        "data-kiwi-size": size,
+        "data-kiwi-tone": tone,
+        "data-kiwi-variant": "indeterminate",
+        className: cx("\u{1F95D}-progress-bar", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  ProgressBar
+};

package/dist/bricks/Radio.d.ts

@@ -1,9 +1,23 @@
-import * as React from "react";
-import * as Ariakit from "@ariakit/react";
-import type { FocusableProps } from "./~utils.js";
+import { type RadioProps as AkRadioProps } from "@ariakit/react/radio";
+import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
-type RadioOwnProps = Pick<Ariakit.RadioProps, "value" | "checked" | "onChange">;
+type RadioOwnProps = Pick<AkRadioProps, "value" | "checked" | "onChange">;
 interface RadioProps extends InputBaseProps, RadioOwnProps {
 }
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * A styled radio input element, typically used for selecting a single option from a list.
+ *
+ * Works well with the `Field` and `Label` components.
+ *
+ * ```tsx
+ * <Field>
+ *   <Label>Choose one</Label>
+ *   <Radio />
+ * </Field>
+ * ```
+ *
+ * Underneath, it's an HTML radio input, i.e. `<input type="radio">`, so it supports the same props,
+ * including `value`, `defaultChecked`, `checked`, and `onChange`.
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLElement | HTMLInputElement>>;
 export {};

package/dist/bricks/Radio.js

@@ -1,18 +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 Radio = React.forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
+import {
+  Radio as AkRadio
+} from "@ariakit/react/radio";
+import { FieldControl } from "./Field.js";
+import { forwardRef } from "./~utils.js";
+const Radio = forwardRef((props, forwardedRef) => {
+  const { id, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Radio,
+    FieldControl,
     {
-      accessibleWhenDisabled: true,
-      id: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
-      ref: forwardedRef
+      type: "checkable",
+      id,
+      render: /* @__PURE__ */ jsx(
+        AkRadio,
+        {
+          accessibleWhenDisabled: true,
+          ...rest,
+          className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+          ref: forwardedRef
+        }
+      )
     }
   );
 });

package/dist/bricks/Root.d.ts

@@ -19,8 +19,17 @@ interface RootProps extends BaseProps {
     density: "dense";
 }
 /**
- * Component to be used at the root of your application. It ensures that kiwi styles are loaded
+ * Component to be used at the root of your application. It ensures that kiwi styles and fonts are loaded
  * and automatically applied to the current page or the encompassing shadow-root.
+ *
+ * Make sure to specify the `colorScheme` and `density` props.
+ *
+ * Example:
+ * ```tsx
+ * <Root colorScheme="dark" density="dense">
+ *   <App />
+ * </Root>
+ * ```
  */
-export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 export {};

package/dist/bricks/Root.js

@@ -1,50 +1,59 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as ReactDOM from "react-dom";
+import { Role } from "@ariakit/react/role";
+import { PortalContext } from "@ariakit/react/portal";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
-import { isBrowser } from "./~utils.js";
-import { useMergedRefs } from "./~hooks.js";
+import { forwardRef, isBrowser } from "./~utils.js";
+import { useIsClient, 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;
+  const [portalContainer, setPortalContainer] = React.useState(null);
+  return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx(Styles, {}),
+    /* @__PURE__ */ jsx(Fonts, {}),
+    synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
+    /* @__PURE__ */ jsx(
+      PortalContainer,
+      {
+        colorScheme: props.colorScheme,
+        density: props.density,
+        ref: setPortalContainer
+      }
+    ),
+    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children })
+  ] });
+});
 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(
+      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
 }) {
@@ -61,6 +70,26 @@ function SynchronizeColorScheme({
   }, [rootNode, colorScheme]);
   return null;
 }
+const PortalContainer = forwardRef((props, forwardedRef) => {
+  const isClient = useIsClient();
+  const rootNode = useRootNode();
+  if (!isClient) return null;
+  const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode;
+  if (!destination) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "\u{1F95D}-root",
+        "data-kiwi-theme": props.colorScheme,
+        "data-kiwi-density": props.density,
+        style: { display: "contents" },
+        ref: forwardedRef
+      }
+    ),
+    destination
+  );
+});
 function Styles() {
   const rootNode = useRootNode();
   useLayoutEffect(() => {
@@ -104,8 +133,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;
@@ -115,12 +144,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/bricks/Select.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { type FocusableProps } from "./~utils.js";
+/**
+ * Compound component for a select element, which allows the user to select a value from a list of options.
+ *
+ * Works well with the `Field` and `Label` components.
+ *
+ * Example usage:
+ * ```tsx
+ * <Field>
+ *   <Label>Select an option</Label>
+ *   <Select.Root>
+ *     <Select.HtmlSelect>
+ *       <option value="1">Option 1</option>
+ *       <option value="2">Option 2</option>
+ *       <option value="3">Option 3</option>
+ *     </Select.HtmlSelect>
+ *   </Select.Root>
+ * </Field>
+ * ```
+ */
+declare const SelectRoot: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+type HtmlSelectBaseProps = Omit<FocusableProps<"select">, "multiple" | "size">;
+interface HtmlSelectProps extends HtmlSelectBaseProps {
+    /**
+     * The variant of the `HtmlSelect`, i.e. solid, outline, or ghost.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline" | "ghost";
+}
+/**
+ * The actual select element to be used inside `Select.Root`. This is a wrapper around the
+ * HTML `<select>` element and should render HTML `<option>` elements as children.
+ *
+ * Example usage:
+ * ```tsx
+ * <Select.HtmlSelect>
+ *   <option value="1">Option 1</option>
+ *   <option value="2">Option 2</option>
+ *   <option value="3">Option 3</option>
+ * </Select.HtmlSelect>
+ * ```
+ *
+ * The usage of this component largely mirrors how the `<select>` element would be used in React.
+ * You can use the same familiar props, including `name`, `defaultValue`, `value`, `onChange`, etc.
+ *
+ * @see https://react.dev/reference/react-dom/components/select
+ */
+declare const HtmlSelect: React.ForwardRefExoticComponent<HtmlSelectProps & React.RefAttributes<HTMLElement | HTMLSelectElement>>;
+export { SelectRoot as Root, HtmlSelect };