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

package/dist/bricks/Field.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useCollectionStore, type CollectionItemProps } from "@ariakit/react/collection";
 import { type BaseProps } from "./~utils.js";
 interface FieldProps extends BaseProps {
     /**
@@ -27,5 +28,26 @@ interface FieldProps extends BaseProps {
  * - `Switch`
  */
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-export declare function useFieldId(): string | undefined;
+type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof useCollectionStore>["item"]>>;
+interface FieldCollectionStoreItem extends CollectionStoreItem {
+    /** The type of field element being tracked */
+    elementType: "label" | "control" | "description";
+    /** If a control, the type of control. */
+    controlType?: "textlike" | "checkable";
+}
+interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "render" | "id"> {
+    type: FieldCollectionStoreItem["controlType"];
+}
+/**
+ * An element tracked as a control in the `Field`’s collection.
+ */
+export declare function FieldControl(props: FieldCollectionItemControlProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * An element tracked as a label in the `Field`’s collection.
+ */
+export declare function FieldLabel(props: Pick<CollectionItemProps, "render">): import("react/jsx-runtime").JSX.Element;
+/**
+ * An element tracked as a description in the `Field`’s collection.
+ */
+export declare function FieldDescription(props: Pick<CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/bricks/Field.js

@@ -1,26 +1,127 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
+import { Role } from "@ariakit/react/role";
+import {
+  useCollectionStore,
+  Collection,
+  useCollectionContext,
+  CollectionItem
+} from "@ariakit/react/collection";
+import { useStoreState } from "@ariakit/react/store";
 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(
-    Ariakit.Role,
+  const { layout, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    FieldCollection,
     {
-      ...rest,
-      className: cx("\u{1F95D}-field", className),
-      "data-kiwi-layout": layout,
-      ref: forwardedRef
+      render: /* @__PURE__ */ jsx(
+        Role.div,
+        {
+          ...rest,
+          className: cx("\u{1F95D}-field", props.className),
+          "data-kiwi-layout": layout,
+          ref: forwardedRef
+        }
+      )
     }
-  ) });
+  );
 });
-const FieldIdContext = React.createContext(void 0);
-function useFieldId() {
-  return React.useContext(FieldIdContext);
+function FieldCollection(props) {
+  const fieldElementCollection = useCollectionStore({
+    defaultItems: []
+  });
+  const renderedItems = useStoreState(fieldElementCollection, "renderedItems");
+  const [controlType, controlIndex] = React.useMemo(() => {
+    const controlIndex2 = renderedItems.findIndex(
+      (item) => item.elementType === "control"
+    );
+    return [renderedItems[controlIndex2]?.controlType, controlIndex2];
+  }, [renderedItems]);
+  const labelPlacement = React.useMemo(() => {
+    const labelIndex = renderedItems.findIndex(
+      (item) => item.elementType === "label"
+    );
+    if (controlIndex === -1 || labelIndex === -1) return;
+    return labelIndex < controlIndex ? "before" : "after";
+  }, [renderedItems, controlIndex]);
+  return /* @__PURE__ */ jsx(
+    Collection,
+    {
+      ...props,
+      store: fieldElementCollection,
+      "data-kiwi-label-placement": labelPlacement,
+      "data-kiwi-control-type": controlType
+    }
+  );
+}
+function FieldControl(props) {
+  const store = useCollectionContext();
+  const generatedId = React.useId();
+  const { id = store ? generatedId : void 0, type, ...rest } = props;
+  const renderedItems = useStoreState(store, "renderedItems");
+  const describedBy = React.useMemo(() => {
+    const idRefList = renderedItems?.filter(
+      (item) => item.elementType === "description"
+    )?.map((item) => item.id).join(" ");
+    return idRefList || void 0;
+  }, [renderedItems]);
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "control",
+      controlType: type
+    }),
+    [type]
+  );
+  return /* @__PURE__ */ jsx(
+    CollectionItem,
+    {
+      id,
+      getItem: getData,
+      render: /* @__PURE__ */ jsx(Role, { ...rest, "aria-describedby": describedBy })
+    }
+  );
+}
+function FieldLabel(props) {
+  const store = useCollectionContext();
+  const renderedItems = useStoreState(store, "renderedItems");
+  const fieldId = React.useMemo(
+    () => renderedItems?.find(
+      (item) => item.elementType === "control"
+    )?.id,
+    [renderedItems]
+  );
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "label"
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    CollectionItem,
+    {
+      getItem: getData,
+      render: /* @__PURE__ */ jsx(Role.label, { ...props, htmlFor: fieldId })
+    }
+  );
+}
+function FieldDescription(props) {
+  const generatedId = React.useId();
+  const { id = generatedId, ...rest } = props;
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "description"
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(CollectionItem, { ...rest, id, getItem: getData });
 }
 export {
   Field,
-  useFieldId
+  FieldControl,
+  FieldDescription,
+  FieldLabel
 };

package/dist/bricks/Icon.d.ts

@@ -1,14 +1,38 @@
 import * as React from "react";
 import { type BaseProps } from "./~utils.js";
 interface IconProps extends Omit<BaseProps<"svg">, "children"> {
-    /** URL of the symbol sprite. */
+    /**
+     * URL of the symbol sprite.
+     *
+     * Should be a URL to an `.svg` file from `@itwin/itwinui-icons`.
+     *
+     * Note: The `.svg` must be an external HTTP resource for it to be processed by
+     * the `<use>` element. As a fallback, JS will be used to `fetch` the SVG from
+     * non-supported URLs; the fetched SVG content will be sanitized using the
+     * `unstable_htmlSanitizer` function passed to `<Root>`.
+     */
     href?: string;
-    /** Size of the icon. Defaults to `regular`. */
+    /**
+     * Size of the icon. This affects the icon's physical dimensions, as well as the
+     * actual SVG contents (different sizes might have different fidelity).
+     *
+     * Defaults to `"regular"` (16px) and can be optionally set to `"large"` (24px).
+     */
     size?: "regular" | "large";
+    /**
+     * Alternative text describing the icon.
+     *
+     * When this prop is passed, the SVG gets rendered as `role="img"` and labelled
+     * using the provided text.
+     *
+     * This prop is not required if the icon is purely decorative. By default, the icon
+     * will be hidden from the accessibility tree.
+     */
+    alt?: string;
 }
 /**
  * Icon component that provides fill and sizing to the SVGs from `@itwin/itwinui-icons`.
- * It uses an external symbol sprite to render the icon based on the specified `size`.
+ * It renders the correct symbol sprite based on the specified `size`.
  *
  * ```tsx
  * const arrowIcon = new URL("@itwin/itwinui-icons/arrow.svg", import.meta.url).href;
@@ -21,7 +45,13 @@ interface IconProps extends Omit<BaseProps<"svg">, "children"> {
  * <Icon render={<svg><path d="…" fill="currentColor" /></svg>} />
  * ```
  *
- * **Note**: This component is meant to be used with decorative icons, so it adds `aria-hidden` by default.
+ * By default, this component assumes that the icon is decorative, so it adds `aria-hidden` by default.
+ *
+ * If the icon is semantically meaningful, the `alt` prop can be used to provide alternative text.
+ *
+ * ```tsx
+ * <Icon href={…} alt="Help" />
+ * ```
  */
 export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 interface DisclosureArrowProps extends Omit<BaseProps<"svg">, "children"> {
@@ -32,4 +62,13 @@ interface DisclosureArrowProps extends Omit<BaseProps<"svg">, "children"> {
     direction?: "down" | "right";
 }
 export declare const DisclosureArrow: React.ForwardRefExoticComponent<DisclosureArrowProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface CheckmarkProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const Checkmark: React.ForwardRefExoticComponent<CheckmarkProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface DismissProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const Dismiss: React.ForwardRefExoticComponent<DismissProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface StatusWarningProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const StatusWarning: React.ForwardRefExoticComponent<StatusWarningProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/bricks/Icon.js

@@ -1,27 +1,107 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import { forwardRef } from "./~utils.js";
+import { Role } from "@ariakit/react/role";
+import {
+  forwardRef,
+  getOwnerDocument,
+  parseDOM
+} from "./~utils.js";
+import {
+  HtmlSanitizerContext,
+  spriteSheetId,
+  useRootNode
+} from "./Root.internal.js";
+import { useLatestRef, useSafeContext } from "./~hooks.js";
 const Icon = forwardRef((props, forwardedRef) => {
-  const { href, size = "regular", ...rest } = props;
-  const iconId = toIconId(size);
+  const { href: hrefProp, size, alt, ...rest } = props;
+  const isDecorative = !alt;
+  const hrefBase = useNormalizedHrefBase(hrefProp);
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.svg,
+    Role.svg,
     {
-      "data-kiwi-size": size,
-      "aria-hidden": true,
+      "aria-hidden": isDecorative ? "true" : void 0,
+      role: isDecorative ? void 0 : "img",
+      "aria-label": isDecorative ? void 0 : alt,
       ...rest,
+      "data-kiwi-size": size,
       className: cx("\u{1F95D}-icon", props.className),
       ref: forwardedRef,
-      children: /* @__PURE__ */ jsx("use", { href: `${props.href}#${iconId}` })
+      children: hrefBase ? /* @__PURE__ */ jsx("use", { href: toIconHref(hrefBase, size) }) : null
     }
   );
 });
+function toIconHref(hrefBase, size) {
+  const separator = hrefBase.includes("#") ? "--" : "#";
+  const suffix = toIconId(size);
+  return `${hrefBase}${separator}${suffix}`;
+}
 function toIconId(size) {
   if (size === "large") return "icon-large";
   return "icon";
 }
+function useNormalizedHrefBase(rawHref) {
+  const generatedId = React.useId();
+  const sanitizeHtml = useLatestRef(useSafeContext(HtmlSanitizerContext));
+  const rootNode = useRootNode();
+  const inlineHref = React.useRef(void 0);
+  const getClientSnapshot = () => {
+    const ownerDocument = getOwnerDocument(rootNode);
+    if (!rawHref || !ownerDocument) return void 0;
+    if (isHttpProtocol(rawHref, ownerDocument)) return rawHref;
+    return inlineHref.current;
+  };
+  const subscribe = React.useCallback(
+    (notify) => {
+      const ownerDocument = getOwnerDocument(rootNode);
+      const spriteSheet = ownerDocument?.getElementById(spriteSheetId);
+      if (!rawHref || !ownerDocument || !spriteSheet) return () => {
+      };
+      if (isHttpProtocol(rawHref, ownerDocument)) return () => {
+      };
+      const cache = spriteSheet[Symbol.for("\u{1F95D}")]?.icons;
+      if (!cache) return () => {
+      };
+      const prefix = `\u{1F95D}${generatedId}`;
+      if (cache.has(rawHref)) {
+        inlineHref.current = cache.get(rawHref);
+        notify();
+        return () => {
+        };
+      }
+      const abortController = new AbortController();
+      const { signal } = abortController;
+      (async () => {
+        const response = await fetch(rawHref, { signal });
+        if (!response.ok) throw new Error(`Failed to fetch ${rawHref}`);
+        const fetchedSvgString = sanitizeHtml.current(await response.text());
+        const parsedSvgContent = parseDOM(fetchedSvgString, {
+          ownerDocument
+        });
+        const symbols = parsedSvgContent.querySelectorAll("symbol");
+        for (const symbol of symbols) {
+          symbol.id = `${prefix}--${symbol.id}`;
+          if (ownerDocument.getElementById(symbol.id)) continue;
+          spriteSheet.appendChild(symbol.cloneNode(true));
+        }
+        inlineHref.current = `#${prefix}`;
+        cache.set(rawHref, inlineHref.current);
+        if (!signal.aborted) notify();
+      })();
+      return () => abortController.abort();
+    },
+    [rawHref, rootNode, sanitizeHtml, generatedId]
+  );
+  return React.useSyncExternalStore(
+    subscribe,
+    getClientSnapshot,
+    () => rawHref
+  );
+}
+function isHttpProtocol(url, ownerDocument) {
+  const { protocol } = new URL(url, ownerDocument.baseURI);
+  return ["http:", "https:"].includes(protocol);
+}
 const DisclosureArrow = forwardRef(
   (props, forwardedRef) => {
     const { direction = "down", ...rest } = props;
@@ -38,7 +118,7 @@ const DisclosureArrow = forwardRef(
       {
         ...rest,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
+          Role.svg,
           {
             width: "16",
             height: "16",
@@ -54,7 +134,91 @@ const DisclosureArrow = forwardRef(
     );
   }
 );
+const Checkmark = 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",
+              {
+                fillRule: "evenodd",
+                d: "M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const Dismiss = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            render: props.render,
+            children: /* @__PURE__ */ jsx("path", { d: "M4.853 4.146a.5.5 0 1 0-.707.708L7.293 8l-3.147 3.146a.5.5 0 0 0 .707.708L8 8.707l3.146 3.147a.5.5 0 0 0 .707-.708L8.707 8l3.146-3.146a.5.5 0 1 0-.707-.708L8 7.293 4.853 4.146Z" })
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const StatusWarning = 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",
+              {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "M8.354 2.06a.5.5 0 0 0-.708 0L2.061 7.647a.5.5 0 0 0 0 .707l5.585 5.586a.5.5 0 0 0 .708 0l5.585-5.586a.5.5 0 0 0 0-.707L8.354 2.061Zm-1.415-.707a1.5 1.5 0 0 1 2.122 0l5.585 5.586a1.5 1.5 0 0 1 0 2.122l-5.585 5.585a1.5 1.5 0 0 1-2.122 0L1.354 9.061a1.5 1.5 0 0 1 0-2.122l5.585-5.586ZM8.75 10.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8.5 8.5v-3a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
+  Checkmark,
   DisclosureArrow,
-  Icon
+  Dismiss,
+  Icon,
+  StatusWarning
 };

package/dist/bricks/IconButton.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { Button } from "./Button.js";
 interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>, "children" | "tone"> {
     /**
@@ -10,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;
@@ -23,11 +24,26 @@ 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"
@@ -56,7 +72,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
  * />
  * ```
  */
-export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
+export declare const IconButton: React.ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
     variant: "ghost";
     /**
      * Whether the button is in a toggled state and currently "active" (toggled on).
@@ -75,5 +91,5 @@ export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit
 }, "ref"> | Omit<IconButtonBaseProps & {
     variant?: Omit<React.ComponentProps<typeof Button>["variant"], "ghost">;
     isActive?: never;
-}, "ref">) & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+}, "ref">) & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
 export {};

package/dist/bricks/IconButton.js

@@ -1,5 +1,7 @@
 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";
@@ -7,17 +9,26 @@ import { Tooltip } from "./Tooltip.js";
 import { forwardRef } from "./~utils.js";
 const IconButton = forwardRef(
   (props, forwardedRef) => {
-    const { label, icon, isActive, labelVariant, ...rest } = props;
+    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, { children: label }),
-          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
+          /* @__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
         ]
       }
     );

package/dist/bricks/Kbd.d.ts

@@ -1,7 +1,18 @@
 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
@@ -10,6 +21,10 @@ interface KbdProps extends BaseProps<"kbd"> {
  * ```tsx
  * <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>
  * ```
+ *
+ * ```tsx
+ * <Kbd symbol="Control" />
+ * ```
  */
 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,17 +1,27 @@
-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 { 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", ...rest } = props;
+  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(
-    Ariakit.Role,
+    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
     }
   );
 });