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

package/dist/DEV/bricks/Field.js

@@ -1,28 +1,128 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-const Field = React.forwardRef(
-  (props, forwardedRef) => {
-    const fieldId = React.useId();
-    const { className, layout, ...rest } = props;
-    return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(
-      Ariakit.Role,
-      {
-        ...rest,
-        className: cx("\u{1F95D}-field", className),
-        "data-kiwi-layout": layout,
-        ref: forwardedRef
-      }
-    ) });
-  }
-);
+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 { layout, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    FieldCollection,
+    {
+      render: /* @__PURE__ */ jsx(
+        Role.div,
+        {
+          ...rest,
+          className: cx("\u{1F95D}-field", props.className),
+          "data-kiwi-layout": layout,
+          ref: forwardedRef
+        }
+      )
+    }
+  );
+});
 DEV: Field.displayName = "Field";
-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/DEV/bricks/Icon.js

@@ -1,61 +1,124 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-const Icon = React.forwardRef(
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "./~utils.js";
+const Icon = forwardRef((props, forwardedRef) => {
+  const { href, size, alt, ...rest } = props;
+  const isDecorative = !alt;
+  return /* @__PURE__ */ jsx(
+    Role.svg,
+    {
+      "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: href ? /* @__PURE__ */ jsx("use", { href: toIconHref(href, size) }) : null
+    }
+  );
+});
+DEV: Icon.displayName = "Icon";
+function toIconHref(href, size) {
+  const separator = href.includes("#") ? "--" : "#";
+  const suffix = toIconId(size);
+  return `${href}${separator}${suffix}`;
+}
+function toIconId(size) {
+  if (size === "large") return "icon-large";
+  return "icon";
+}
+const DisclosureArrow = forwardRef(
   (props, forwardedRef) => {
-    const { href, size = "regular", ...rest } = props;
-    const iconId = toIconId(size);
+    const { direction = "down", ...rest } = props;
+    const path = React.useMemo(() => {
+      switch (direction) {
+        case "down":
+          return /* @__PURE__ */ jsx("path", { d: "M8 10 5 7h6l-3 3Z" });
+        case "right":
+          return /* @__PURE__ */ jsx("path", { d: "M7 11V5l3 3-3 3Z" });
+      }
+    }, [direction]);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.svg,
+      Icon,
       {
-        "data-kiwi-size": size,
-        "aria-hidden": true,
         ...rest,
-        className: cx("\u{1F95D}-icon", props.className),
-        ref: forwardedRef,
-        children: /* @__PURE__ */ jsx("use", { href: `${props.href}#${iconId}` })
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: path
+          }
+        ),
+        className: cx("\u{1F95D}-disclosure-arrow", props.className),
+        ref: forwardedRef
       }
     );
   }
 );
-DEV: Icon.displayName = "Icon";
-function toIconId(size) {
-  if (size === "large") return "icon-large";
-  return "icon";
-}
-const DisclosureArrow = React.forwardRef((props, forwardedRef) => {
-  const { direction = "down", ...rest } = props;
-  const path = React.useMemo(() => {
-    switch (direction) {
-      case "down":
-        return /* @__PURE__ */ jsx("path", { d: "M8 10 5 7h6l-3 3Z" });
-      case "right":
-        return /* @__PURE__ */ jsx("path", { d: "M7 11V5l3 3-3 3Z" });
-    }
-  }, [direction]);
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
-      ...rest,
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Role.svg,
-        {
-          width: "16",
-          height: "16",
-          fill: "currentColor",
-          viewBox: "0 0 16 16",
-          render: props.render,
-          children: path
-        }
-      ),
-      className: cx("\u{1F95D}-disclosure-arrow", props.className),
-      ref: forwardedRef
-    }
-  );
-});
 DEV: DisclosureArrow.displayName = "DisclosureArrow";
+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
+      }
+    );
+  }
+);
+DEV: Checkmark.displayName = "Checkmark";
+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
+      }
+    );
+  }
+);
+DEV: Dismiss.displayName = "Dismiss";
 export {
+  Checkmark,
   DisclosureArrow,
+  Dismiss,
   Icon
 };

package/dist/DEV/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 });
-});
+);
 DEV: IconButton.displayName = "IconButton";
 export {
   IconButton

package/dist/DEV/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/DEV/bricks/Kbd.js

@@ -1,22 +1,37 @@
-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;
+  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(
+    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,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/DEV/bricks/ProgressBar.js

@@ -0,0 +1,25 @@
+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
+      }
+    );
+  }
+);
+DEV: ProgressBar.displayName = "ProgressBar";
+export {
+  ProgressBar
+};

package/dist/DEV/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
+        }
+      )
     }
   );
 });