@tamagui/react-native-web-lite 1.116.0 → 1.116.2

package/dist/cjs/createElement/__tests__/index-test.js

@@ -0,0 +1,536 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+));
+var import_react = require("@testing-library/react"), import__ = __toESM(require("..")), import_jsx_runtime = require("react/jsx-runtime");
+function getAttribute(container, attribute) {
+  return container.firstChild.getAttribute(attribute);
+}
+function getProperty(container, prop) {
+  return container.firstChild[prop];
+}
+describe("exports/createElement/index.js", () => {
+  test("renders different DOM elements", () => {
+    let { container } = (0, import_react.render)((0, import__.default)("span"));
+    expect(container.firstChild).toMatchSnapshot(), { container } = (0, import_react.render)((0, import__.default)("main")), expect(container.firstChild).toMatchSnapshot(), { container } = (0, import_react.render)(
+      (0, import__.default)("svg", {
+        children: (0, import__.default)("image", { href: "#href" })
+      })
+    ), expect(container.firstChild).toMatchSnapshot();
+  }), describe('prop "accessibilityRole"', () => {
+    test("string component type", () => {
+      const { container } = (0, import_react.render)((0, import__.default)("span", { accessibilityRole: "link" }));
+      expect(container.firstChild.nodeName).toBe("SPAN");
+    }), test("function component type", () => {
+      const Custom = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}), { container } = (0, import_react.render)((0, import__.default)(Custom, { accessibilityRole: "link" }));
+      expect(container.firstChild.nodeName).toBe("DIV");
+    });
+  }), describe("accessibility props", () => {
+    test("accessibilityActiveDescendant", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityActiveDescendant: null })
+      );
+      expect(getAttribute(isEmpty, "aria-activedescendant")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityActiveDescendant: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-activedescendant")).toBe("abc");
+    }), test("accessibilityAtomic", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityAtomic: null })
+      );
+      expect(getAttribute(isEmpty, "aria-atomic")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityAtomic: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-atomic")).toBe("true");
+    }), test("accessibilityAutoComplete", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityAutoComplete: null })
+      );
+      expect(getAttribute(isEmpty, "aria-autocomplete")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityAutoComplete: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-autocomplete")).toBe("true");
+    }), test("accessibilityBusy", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityBusy: null })
+      );
+      expect(getAttribute(isEmpty, "aria-busy")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityBusy: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-busy")).toBe("true");
+    }), test("accessibilityChecked", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityChecked: null })
+      );
+      expect(getAttribute(isEmpty, "aria-checked")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityChecked: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-checked")).toBe("true");
+    }), test("accessibilityColumnCount", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityColumnCount: null })
+      );
+      expect(getAttribute(isEmpty, "aria-colcount")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityColumnCount: 5 })
+      );
+      expect(getAttribute(hasValue, "aria-colcount")).toBe("5");
+    }), test("accessibilityColumnIndex", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityColumnIndex: null })
+      );
+      expect(getAttribute(isEmpty, "aria-colindex")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityColumnIndex: 5 })
+      );
+      expect(getAttribute(hasValue, "aria-colindex")).toBe("5");
+    }), test("accessibilityColumnSpan", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityColumnSpan: null })
+      );
+      expect(getAttribute(isEmpty, "aria-colspan")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityColumnSpan: 5 })
+      );
+      expect(getAttribute(hasValue, "aria-colspan")).toBe("5");
+    }), test("accessibilityControls", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityControls: null })
+      );
+      expect(getAttribute(isEmpty, "aria-controls")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityControls: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-controls")).toBe("abc");
+      const { container: hasMultipleValues } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityControls: ["abc", "def"] })
+      );
+      expect(getAttribute(hasMultipleValues, "aria-controls")).toBe("abc def");
+    }), test("accessibilityCurrent", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityCurrent: null })
+      );
+      expect(getAttribute(isEmpty, "aria-current")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityCurrent: "page" })
+      );
+      expect(getAttribute(hasValue, "aria-current")).toBe("page");
+    }), test("accessibilityDescribedBy", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityDescribedBy: null })
+      );
+      expect(getAttribute(isEmpty, "aria-describedby")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityDescribedBy: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-describedby")).toBe("abc");
+      const { container: hasMultipleValues } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityDescribedBy: ["abc", "def"] })
+      );
+      expect(getAttribute(hasMultipleValues, "aria-describedby")).toBe("abc def");
+    }), test("accessibilityDetails", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityDetails: null })
+      );
+      expect(getAttribute(isEmpty, "aria-details")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityDetails: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-details")).toBe("abc");
+    }), test("accessibilityDisabled", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("button", { accessibilityDisabled: null })
+      );
+      expect(getAttribute(isEmpty, "aria-disabled")).toBeNull(), expect(getProperty(isEmpty, "disabled")).toBe(!1);
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("button", { accessibilityDisabled: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-disabled")).toBe("true"), expect(getProperty(hasValue, "disabled")).toBe(!0);
+    }), test("accessibilityErrorMessage", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityErrorMessage: null })
+      );
+      expect(getAttribute(isEmpty, "aria-errormessage")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityErrorMessage: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-errormessage")).toBe("abc");
+    }), test("accessibilityExpanded", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityExpanded: null })
+      );
+      expect(getAttribute(isEmpty, "aria-expanded")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityExpanded: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-expanded")).toBe("true");
+    }), test("accessibilityFlowTo", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityFlowTo: null })
+      );
+      expect(getAttribute(isEmpty, "aria-flowto")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityFlowTo: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-flowto")).toBe("abc");
+      const { container: hasMultipleValues } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityFlowTo: ["abc", "def"] })
+      );
+      expect(getAttribute(hasMultipleValues, "aria-flowto")).toBe("abc def");
+    }), test("accessibilityHasPopup", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityHasPopup: null })
+      );
+      expect(getAttribute(isEmpty, "aria-haspopup")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityHasPopup: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-haspopup")).toBe("true");
+    }), test("accessibilityHidden", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityHidden: null })
+      );
+      expect(getAttribute(isEmpty, "aria-hidden")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityHidden: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-hidden")).toBe("true");
+    }), test("accessibilityInvalid", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("input", { accessibilityInvalid: null })
+      );
+      expect(getAttribute(isEmpty, "aria-invalid")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("input", { accessibilityInvalid: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-invalid")).toBe("true");
+    }), test("accessibilityKeyShortcuts", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityKeyShortcuts: null })
+      );
+      expect(getAttribute(isEmpty, "aria-keyshortcuts")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", {
+          accessibilityKeyShortcuts: ["ArrowUp", "Enter", "Space", "Alt+Shift+T"]
+        })
+      );
+      expect(getAttribute(hasValue, "aria-keyshortcuts")).toBe(
+        "ArrowUp Enter Space Alt+Shift+T"
+      );
+    }), test("accessibilityLabel", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLabel: null })
+      );
+      expect(getAttribute(isEmpty, "aria-label")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLabel: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-label")).toBe("abc");
+    }), test("accessibilityLabelledBy", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLabelledBy: null })
+      );
+      expect(getAttribute(isEmpty, "aria-labelledby")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLabelledBy: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-labelledby")).toBe("abc");
+      const { container: hasMultipleValues } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLabelledBy: ["abc", "def"] })
+      );
+      expect(getAttribute(hasMultipleValues, "aria-labelledby")).toBe("abc def");
+    }), test("accessibilityLevel", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLevel: null })
+      );
+      expect(getAttribute(isEmpty, "aria-level")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLevel: 3 })
+      );
+      expect(getAttribute(hasValue, "aria-level")).toBe("3");
+    }), test("accessibilityLiveRegion", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLiveRegion: null })
+      );
+      expect(getAttribute(isEmpty, "aria-live")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityLiveRegion: "polite" })
+      );
+      expect(getAttribute(hasValue, "aria-live")).toBe("polite");
+    }), test("accessibilityModal", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityModal: null })
+      );
+      expect(getAttribute(isEmpty, "aria-modal")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityModal: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-modal")).toBe("true");
+    }), test("accessibilityMultiline", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityMultiline: null })
+      );
+      expect(getAttribute(isEmpty, "aria-multiline")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityMultiline: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-multiline")).toBe("true");
+    }), test("accessibilityMultiSelectable", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityMultiSelectable: null })
+      );
+      expect(getAttribute(isEmpty, "aria-multiselectable")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityMultiSelectable: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-multiselectable")).toBe("true");
+    }), test("accessibilityOrientation", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityOrientation: null })
+      );
+      expect(getAttribute(isEmpty, "aria-orientation")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityOrientation: "vertical" })
+      );
+      expect(getAttribute(hasValue, "aria-orientation")).toBe("vertical");
+    }), test("accessibilityOwns", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityOwns: null })
+      );
+      expect(getAttribute(isEmpty, "aria-owns")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityOwns: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-owns")).toBe("abc");
+      const { container: hasMultipleValues } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityOwns: ["abc", "def"] })
+      );
+      expect(getAttribute(hasMultipleValues, "aria-owns")).toBe("abc def");
+    }), test("accessibilityPlaceholder", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityPlaceholder: null })
+      );
+      expect(getAttribute(isEmpty, "aria-placeholder")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityPlaceholder: "MM-DD-YYYY" })
+      );
+      expect(getAttribute(hasValue, "aria-placeholder")).toBe("MM-DD-YYYY");
+    }), test("accessibilityPosInSet", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityPosInSet: null })
+      );
+      expect(getAttribute(isEmpty, "aria-posinset")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityPosInSet: 3 })
+      );
+      expect(getAttribute(hasValue, "aria-posinset")).toBe("3");
+    }), test("accessibilityPressed", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityPressed: null })
+      );
+      expect(getAttribute(isEmpty, "aria-pressed")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityPressed: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-pressed")).toBe("true");
+    }), test("accessibilityReadOnly", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("input", { accessibilityReadOnly: null })
+      );
+      expect(getAttribute(isEmpty, "aria-readonly")).toBeNull(), expect(getProperty(isEmpty, "readOnly")).toBe(!1);
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("input", { accessibilityReadOnly: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-readonly")).toBe("true"), expect(getProperty(hasValue, "readOnly")).toBe(!0);
+    }), test("accessibilityRequired", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("input", { accessibilityRequired: null })
+      );
+      expect(getAttribute(isEmpty, "aria-required")).toBeNull(), expect(getProperty(isEmpty, "required")).toBe(!1);
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("input", { accessibilityRequired: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-required")).toBe("true"), expect(getProperty(hasValue, "required")).toBe(!0);
+    }), test("accessibilityRole", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRole: null })
+      );
+      expect(getAttribute(isEmpty, "role")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRole: "button" })
+      );
+      expect(getAttribute(hasValue, "role")).toBe("button"), expect(getAttribute(hasValue, "tabIndex")).toBe("0");
+      const { container: roleIsNone } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRole: "none" })
+      );
+      expect(getAttribute(roleIsNone, "role")).toBe("presentation");
+    }), test("accessibilityRoleDescription", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRoleDescription: null })
+      );
+      expect(getAttribute(isEmpty, "aria-roledescription")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRoleDescription: "abc" })
+      );
+      expect(getAttribute(hasValue, "aria-roledescription")).toBe("abc");
+    }), test("accessibilityRowCount", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRowCount: null })
+      );
+      expect(getAttribute(isEmpty, "aria-rowcount")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRowCount: 5 })
+      );
+      expect(getAttribute(hasValue, "aria-rowcount")).toBe("5");
+    }), test("accessibilityRowIndex", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRowIndex: null })
+      );
+      expect(getAttribute(isEmpty, "aria-rowindex")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRowIndex: 5 })
+      );
+      expect(getAttribute(hasValue, "aria-rowindex")).toBe("5");
+    }), test("accessibilityRowSpan", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRowSpan: null })
+      );
+      expect(getAttribute(isEmpty, "aria-rowspan")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRowSpan: 5 })
+      );
+      expect(getAttribute(hasValue, "aria-rowspan")).toBe("5");
+    }), test("accessibilitySelected", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilitySelected: null })
+      );
+      expect(getAttribute(isEmpty, "aria-selected")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilitySelected: !0 })
+      );
+      expect(getAttribute(hasValue, "aria-selected")).toBe("true");
+    }), test("accessibilitySetSize", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilitySetSize: null })
+      );
+      expect(getAttribute(isEmpty, "aria-setsize")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilitySetSize: 5 })
+      );
+      expect(getAttribute(hasValue, "aria-setsize")).toBe("5");
+    }), test("accessibilitySort", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilitySort: null })
+      );
+      expect(getAttribute(isEmpty, "aria-sort")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilitySort: "ascending" })
+      );
+      expect(getAttribute(hasValue, "aria-sort")).toBe("ascending");
+    }), test("accessibilityValueMax", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityValueMax: null })
+      );
+      expect(getAttribute(isEmpty, "aria-valuemax")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityValueMax: 100 })
+      );
+      expect(getAttribute(hasValue, "aria-valuemax")).toBe("100");
+    }), test("accessibilityValueMin", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityValueMin: null })
+      );
+      expect(getAttribute(isEmpty, "aria-valuemin")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityValueMin: 10 })
+      );
+      expect(getAttribute(hasValue, "aria-valuemin")).toBe("10");
+    }), test("accessibilityValueNow", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityValueNow: null })
+      );
+      expect(getAttribute(isEmpty, "aria-valuenow")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityValueNow: 50 })
+      );
+      expect(getAttribute(hasValue, "aria-valuenow")).toBe("50");
+    }), test("accessibilityValueText", () => {
+      const { container: isEmpty } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityValueText: null })
+      );
+      expect(getAttribute(isEmpty, "aria-valuetext")).toBeNull();
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityValueText: "fifty" })
+      );
+      expect(getAttribute(hasValue, "aria-valuetext")).toBe("fifty");
+    }), test("dataSet", () => {
+      const { container: hasValue } = (0, import_react.render)(
+        (0, import__.default)("div", {
+          dataSet: {
+            one: "1",
+            two: "2",
+            camelCase: "camelCase",
+            msPrefix: "msPrefix"
+          }
+        })
+      );
+      expect(hasValue.firstChild).toMatchInlineSnapshot(`
+        <div
+          data-camel-case="camelCase"
+          data-ms-prefix="msPrefix"
+          data-one="1"
+          data-two="2"
+        />
+      `);
+    }), test("focusable", () => {
+      const { container: isEmpty } = (0, import_react.render)((0, import__.default)("div", { focusable: null }));
+      expect(getAttribute(isEmpty, "tabindex")).toBeNull();
+      const { container: isTrue } = (0, import_react.render)((0, import__.default)("div", { focusable: !0 }));
+      expect(getAttribute(isTrue, "tabindex")).toBe("0");
+      const { container: isFalseNativelyFocusable } = (0, import_react.render)(
+        (0, import__.default)("button", { focusable: !1 })
+      );
+      expect(getAttribute(isFalseNativelyFocusable, "tabindex")).toBe("-1");
+      const { container: isDisabledNativelyFocusable } = (0, import_react.render)(
+        (0, import__.default)("button", {
+          accessibilityDisabled: !0,
+          focusable: !0
+        })
+      );
+      expect(getAttribute(isDisabledNativelyFocusable, "tabindex")).toBe("-1");
+      const { container: isTrueNativelyFocusable } = (0, import_react.render)(
+        (0, import__.default)("button", { focusable: !0 })
+      );
+      expect(getAttribute(isTrueNativelyFocusable, "tabindex")).toBeNull();
+      const { container: isFocusableRole } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRole: "button", focusable: !0 })
+      );
+      expect(getAttribute(isFocusableRole, "tabindex")).toBe("0");
+      const { container: isFalseFocusableRole } = (0, import_react.render)(
+        (0, import__.default)("div", { accessibilityRole: "button", focusable: !1 })
+      );
+      expect(getAttribute(isFalseFocusableRole, "tabindex")).toBe("-1");
+    });
+  });
+});
+//# sourceMappingURL=index-test.js.map

package/dist/cjs/createElement/index.js

@@ -0,0 +1,37 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var createElement_exports = {};
+__export(createElement_exports, {
+  default: () => createElement_default
+});
+module.exports = __toCommonJS(createElement_exports);
+var import_react = __toESM(require("react")), import_react_native_web_internals = require("@tamagui/react-native-web-internals"), import_web = require("@tamagui/web"), import_jsx_runtime = require("react/jsx-runtime");
+const createElement = (component, props, options) => {
+  let accessibilityComponent;
+  component && component.constructor === String && (accessibilityComponent = import_react_native_web_internals.AccessibilityUtil.propsToAccessibilityComponent(props));
+  const Component = accessibilityComponent || component, domProps = (0, import_react_native_web_internals.createDOMProps)(Component, props, options), styles = import_react_native_web_internals.stylesFromProps.get(domProps);
+  let element = import_react.default.createElement(Component, domProps);
+  return styles && (element = (0, import_web.wrapStyleTags)(styles, element)), domProps.dir ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_web_internals.LocaleProvider, { direction: domProps.dir, locale: domProps.lang, children: element }) : element;
+};
+var createElement_default = createElement;
+//# sourceMappingURL=index.js.map

package/dist/cjs/createReactDOMStyle.js

@@ -0,0 +1,21 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var createReactDOMStyle_exports = {};
+__export(createReactDOMStyle_exports, {
+  default: () => createReactDOMStyle_default
+});
+module.exports = __toCommonJS(createReactDOMStyle_exports);
+var import_react_native_web_internals = require("@tamagui/react-native-web-internals"), createReactDOMStyle_default = import_react_native_web_internals.createReactDOMStyle;
+//# sourceMappingURL=createReactDOMStyle.js.map

package/dist/cjs/findNodeHandle.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var findNodeHandle_exports = {};
+__export(findNodeHandle_exports, {
+  findNodeHandle: () => findNodeHandle
+});
+module.exports = __toCommonJS(findNodeHandle_exports);
+var import_react_dom = require("react-dom");
+const findNodeHandle = (host) => {
+  let node;
+  try {
+    node = (0, import_react_dom.findDOMNode)(host);
+  } catch {
+  }
+  return node;
+};
+//# sourceMappingURL=findNodeHandle.js.map