@itwin/itwinui-react 5.0.0-alpha.5 → 5.0.0-alpha.7

package/dist/bricks/Field.d.ts

@@ -28,14 +28,6 @@ interface FieldProps extends BaseProps {
  * - `Switch`
  */
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-/**
- * Use the description IDs for a field.
- */
-export declare function useFieldDescribedBy(ariaDescribedByProp?: string): string | undefined;
-/**
- * Registers a description for an associated control.
- */
-export declare function useFieldRegisterDescribedBy(id: string): void;
 type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof Ariakit.useCollectionStore>["item"]>>;
 interface FieldCollectionStoreItem extends CollectionStoreItem {
     /** The type of field element being tracked */
@@ -54,4 +46,8 @@ export declare function FieldControl(props: FieldCollectionItemControlProps): im
  * An element tracked as a label in the `Field`’s collection.
  */
 export declare function FieldLabel(props: Pick<Ariakit.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<Ariakit.CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/bricks/Field.js

@@ -5,7 +5,7 @@ import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Field = forwardRef((props, forwardedRef) => {
   const { layout, ...rest } = props;
-  return /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     FieldCollection,
     {
       render: /* @__PURE__ */ jsx(
@@ -18,57 +18,8 @@ const Field = forwardRef((props, forwardedRef) => {
         }
       )
     }
-  ) });
-});
-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]);
-}
+});
 function FieldCollection(props) {
   const fieldElementCollection = Ariakit.useCollectionStore({
     defaultItems: []
@@ -101,8 +52,16 @@ function FieldCollection(props) {
   );
 }
 function FieldControl(props) {
+  const store = Ariakit.useCollectionContext();
   const generatedId = React.useId();
-  const { id = generatedId, type, ...rest } = props;
+  const { id = store ? generatedId : void 0, type, ...rest } = props;
+  const renderedItems = Ariakit.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,
@@ -111,7 +70,14 @@ function FieldControl(props) {
     }),
     [type]
   );
-  return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
+  return /* @__PURE__ */ jsx(
+    Ariakit.CollectionItem,
+    {
+      id,
+      getItem: getData,
+      render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest, "aria-describedby": describedBy })
+    }
+  );
 }
 function FieldLabel(props) {
   const store = Ariakit.useCollectionContext();
@@ -137,10 +103,21 @@ function FieldLabel(props) {
     }
   );
 }
+function FieldDescription(props) {
+  const generatedId = React.useId();
+  const { id = generatedId, ...rest } = props;
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "description"
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
+}
 export {
   Field,
   FieldControl,
-  FieldLabel,
-  useFieldDescribedBy,
-  useFieldRegisterDescribedBy
+  FieldDescription,
+  FieldLabel
 };

package/dist/bricks/Icon.d.ts

@@ -1,10 +1,29 @@
 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`.
+     */
     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`.
@@ -21,7 +40,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"> {

package/dist/bricks/Icon.js

@@ -4,12 +4,15 @@ import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
 import { forwardRef } from "./~utils.js";
 const Icon = forwardRef((props, forwardedRef) => {
-  const { href, size = "regular", ...rest } = props;
+  const { href, size, alt, ...rest } = props;
   const iconId = toIconId(size);
+  const isDecorative = !alt;
   return /* @__PURE__ */ jsx(
     Ariakit.Role.svg,
     {
-      "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),

package/dist/bricks/ListItem.d.ts

@@ -7,4 +7,8 @@ interface ListItemContentProps extends Ariakit.RoleProps<"span"> {
 }
 /** @internal */
 declare const ListItemContent: import("react").ForwardRefExoticComponent<Omit<ListItemContentProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
-export { ListItem as Root, ListItemContent as Content };
+interface ListItemDecorationProps extends Ariakit.RoleProps<"span"> {
+}
+/** @internal */
+declare const ListItemDecoration: import("react").ForwardRefExoticComponent<Omit<ListItemDecorationProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
+export { ListItem as Root, ListItemContent as Content, ListItemDecoration as Decoration, };

package/dist/bricks/ListItem.js

@@ -25,7 +25,20 @@ const ListItemContent = forwardRef(
     );
   }
 );
+const ListItemDecoration = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role.span,
+      {
+        ...props,
+        className: cx("\u{1F95D}-list-item-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   ListItemContent as Content,
+  ListItemDecoration as Decoration,
   ListItem as Root
 };

package/dist/bricks/Radio.js

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

package/dist/bricks/Select.js

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

package/dist/bricks/Switch.js

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

package/dist/bricks/Table.d.ts

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface TableProps extends BaseProps {
+}
+/**
+ * A table is a grid of rows and columns that displays data in a structured format.
+ *
+ * `Table.Root` is the root component for a table.
+ * `Table.Header`, `Table.Body`, and `Table.Cell` can be nested inside a `Table.Root` to create a table structure.
+ *
+ * Example:
+ * ```tsx
+ * <Table.Root>
+ *  <Table.Caption>Table Caption</Table.Caption>
+ * 	<Table.Header>
+ * 		<Table.Row>
+ * 			<Table.Cell>Header 1</Table.Cell>
+ * 			<Table.Cell>Header 2</Table.Cell>
+ * 		</Table.Row>
+ * 	</Table.Header>
+ *
+ * 	<Table.Body>
+ * 		<Table.Row>
+ * 			<Table.Cell>Cell 1.1</Table.Cell>
+ * 			<Table.Cell>Cell 1.2</Table.Cell>
+ * 		</Table.Row>
+ * 		<Table.Row>
+ * 			<Table.Cell>Cell 2.1</Table.Cell>
+ * 			<Table.Cell>Cell 2.2</Table.Cell>
+ * 		</Table.Row>
+ * 	</Table.Body>
+ * </Table.Root>
+ * ```
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableHeaderProps extends BaseProps {
+}
+/**
+ * `Table.Header` is a column component of cells that labels the columns of a table.
+ * `Table.Row` and `Table.Cell` can be nested inside a `Table.Header` to create a header row.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Header>
+ *		<Table.Row>
+ *			<Table.Cell>Header 1</Table.Cell>
+ * 			<Table.Cell>Header 2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Header>
+ * ```
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableBodyProps extends BaseProps {
+}
+/**
+ * `Table.Body` is a component that contains the rows of table data.
+ * Multiple `Table.Row`s and `Table.Cell`s can be nested inside a `Table.Body` to create a table body.
+ *
+ *  This component intentionally does not set `role=rowgroup` because it is not properly supported.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Body>
+ *		<Table.Row>
+ *			<Table.Cell>Cell 1.1</Table.Cell>
+ *			<Table.Cell>Cell 1.2</Table.Cell>
+ *		</Table.Row>
+ *		<Table.Row>
+ *			<Table.Cell>Cell 2.1</Table.Cell>
+ *			<Table.Cell>Cell 2.2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Body>
+ * ```
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableRowProps extends BaseProps {
+}
+/**
+ * `Table.Row` is a component that contains the cells of a table row.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Row>
+ *		<Table.Cell>Cell 1.1</Table.Cell>
+ *		<Table.Cell>Cell 1.2</Table.Cell>
+ *	</Table.Row>
+ * ```
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableCaptionProps extends BaseProps<"caption"> {
+}
+/**
+ * `Table.Caption` is a component that contains the caption of a table.
+ *
+ * Example:
+ * ```tsx
+ * <Table.Root>
+ * 	<Table.Caption>Table Caption</Table.Caption>
+ * 	…
+ * </Table.Root>
+ * ```
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLElement>>;
+interface TableCellProps extends BaseProps<"span"> {
+}
+/**
+ * `Table.Cell` is a component that contains the data of a table cell.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Cell>Cell 1.1</Table.Cell>
+ * ```
+ */
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+export { Table as Root, TableHeader as Header, TableBody as Body, TableRow as Row, TableCaption as Caption, TableCell as Cell, };

package/dist/bricks/Table.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import * as Ariakit from "@ariakit/react";
+import * as React from "react";
+import cx from "classnames";
+import { forwardRef } from "./~utils.js";
+import { useMergedRefs } from "./~hooks.js";
+const TableContext = React.createContext({
+  setCaptionId: () => {
+  }
+});
+const Table = forwardRef((props, forwardedRef) => {
+  const [captionId, setCaptionId] = React.useState();
+  const tableContext = React.useMemo(() => ({ setCaptionId }), []);
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(
+    Ariakit.Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table", props.className),
+      ref: forwardedRef,
+      role: "table",
+      "aria-labelledby": captionId,
+      children: props.children
+    }
+  ) });
+});
+const TableHeaderContext = React.createContext(false);
+const TableHeader = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+      Ariakit.Role.div,
+      {
+        ...props,
+        className: cx("\u{1F95D}-table-header", props.className),
+        ref: forwardedRef,
+        role: "rowgroup",
+        children: props.children
+      }
+    ) });
+  }
+);
+const TableBody = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table-body", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+const TableRow = forwardRef((props, forwardedRef) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.div,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-table-row", props.className),
+      ref: forwardedRef,
+      role: "row",
+      children
+    }
+  );
+});
+const TableCaption = forwardRef(
+  (props, forwardedRef) => {
+    const fallbackId = React.useId();
+    const { id = fallbackId, children, ...rest } = props;
+    const { setCaptionId } = React.useContext(TableContext);
+    const captionIdRef = React.useCallback(
+      (element) => {
+        setCaptionId(element ? id : void 0);
+      },
+      [id, setCaptionId]
+    );
+    return /* @__PURE__ */ jsx(
+      Ariakit.Role,
+      {
+        ...rest,
+        id,
+        className: cx("\u{1F95D}-table-caption", props.className),
+        ref: useMergedRefs(forwardedRef, captionIdRef),
+        children
+      }
+    );
+  }
+);
+const TableCell = forwardRef((props, forwardedRef) => {
+  const isWithinTableHeader = React.useContext(TableHeaderContext);
+  return /* @__PURE__ */ jsx(
+    Ariakit.Role.span,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table-cell", props.className),
+      ref: forwardedRef,
+      role: isWithinTableHeader ? "columnheader" : "cell",
+      children: props.children
+    }
+  );
+});
+export {
+  TableBody as Body,
+  TableCaption as Caption,
+  TableCell as Cell,
+  TableHeader as Header,
+  Table as Root,
+  TableRow as Row
+};

package/dist/bricks/TextBox.js

@@ -2,14 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-import { FieldControl, useFieldDescribedBy } from "./Field.js";
+import { FieldControl } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
     const { id, ...rest } = props;
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
     React.useEffect(() => {
@@ -25,7 +24,6 @@ const TextBoxInput = forwardRef(
           {
             readOnly: props.disabled,
             ...rest,
-            "aria-describedby": describedBy,
             className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
             placeholder: props.placeholder ?? " ",
             render: /* @__PURE__ */ jsx(
@@ -45,7 +43,6 @@ const TextBoxInput = forwardRef(
 const TextBoxTextarea = forwardRef(
   (props, forwardedRef) => {
     const { id, ...rest } = props;
-    const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
       FieldControl,
       {
@@ -57,7 +54,6 @@ const TextBoxTextarea = forwardRef(
             readOnly: props.disabled,
             ...rest,
             className: cx("\u{1F95D}-text-box", props.className),
-            "aria-describedby": describedBy,
             placeholder: props.placeholder ?? " ",
             render: /* @__PURE__ */ jsx(
               Ariakit.Focusable,

package/dist/bricks/Tree.js

@@ -30,7 +30,6 @@ const TreeItem = forwardRef((props, forwardedRef) => {
     icon,
     label,
     actions,
-    style,
     onSelectedChange,
     onExpandedChange,
     onClick: onClickProp,
@@ -93,18 +92,25 @@ const TreeItem = forwardRef((props, forwardedRef) => {
               style: { "--\u{1F95D}tree-item-level": level },
               role: void 0,
               children: [
+                /* @__PURE__ */ jsxs(ListItem.Decoration, { 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(
-                  TreeItemExpander,
+                  ListItem.Decoration,
                   {
-                    onClick: () => {
-                      if (expanded === void 0) return;
-                      onExpandedChange?.(!expanded);
-                    }
+                    render: /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
                   }
-                ),
-                typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
-                /* @__PURE__ */ jsx(TreeItemContent, { label }),
-                /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
+                )
               ]
             }
           )

package/dist/bricks/index.d.ts

@@ -1,5 +1,7 @@
 export { Root } from "./Root.js";
 export { Anchor } from "./Anchor.js";
+export { Avatar } from "./Avatar.js";
+export { Badge } from "./Badge.js";
 export { Button } from "./Button.js";
 export { Checkbox } from "./Checkbox.js";
 export { Chip } from "./Chip.js";

package/dist/bricks/index.js

@@ -1,6 +1,8 @@
 "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";
@@ -24,6 +26,8 @@ import { Tooltip } from "./Tooltip.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 export {
   Anchor,
+  Avatar,
+  Badge,
   Button,
   Checkbox,
   Chip,